Scroll behavior control in NextJS - Mini Project: Build & Apply

Scroll Behavior Control in Next.js

📖 Scenario: You are building a simple Next.js app with multiple sections on a page. You want to control how the page scrolls when users click navigation links.This helps users smoothly move between sections, improving their experience.

🎯 Goal: Create a Next.js page with three sections and a navigation menu. Implement smooth scroll behavior when clicking the navigation links.

📋 What You'll Learn

Create a Next.js page with three sections having unique id attributes

Add a navigation menu with links pointing to each section using href with hash anchors

Add a configuration variable to control scroll behavior

Use Next.js useRouter and useEffect hooks to implement smooth scrolling when navigation links are clicked

💡 Why This Matters

🌍 Real World

Smooth scrolling improves user experience on websites with multiple sections, such as landing pages, documentation, or portfolios.

💼 Career

Controlling scroll behavior is a common task in frontend development, especially when building single-page applications or interactive websites.

1

Create page sections with unique IDs

Create a Next.js page component called ScrollPage. Inside the component, create three section elements with id attributes set to section1, section2, and section3. Each section should contain a heading with text Section 1, Section 2, and Section 3 respectively.

NextJS

export default function ScrollPage() {
  return (
    
      {/* Your code here */}
    
  )
}

Need a hint?

Use three section tags with id attributes and headings inside the main element.

2

Add navigation menu with links to sections

Inside the ScrollPage component, above the main element, add a nav element. Inside nav, create an unordered list <ul> with three list items <li>. Each list item should contain an anchor <a> linking to #section1, #section2, and #section3 respectively. The link texts should be Go to Section 1, Go to Section 2, and Go to Section 3.

NextJS

export default function ScrollPage() {
  return (
    
      {/* Your code here for nav menu */}
      
        
          Section 1
        
        
          Section 2
        
        
          Section 3
        
      
    
  )
}

Need a hint?

Use a nav with a list of anchor links pointing to each section's id.

3

Add scroll behavior configuration variable

Inside the ScrollPage component, before the return statement, create a constant variable called scrollBehavior and set it to the string "smooth". This variable will control how the page scrolls when navigating.

NextJS

export default function ScrollPage() {
  const scrollBehavior = "smooth"
  // Your code here
  return (
    
      
        
          Go to Section 1
          Go to Section 2
          Go to Section 3
        
      
      
        
          Section 1
        
        
          Section 2
        
        
          Section 3
        
      
    
  )
}

Need a hint?

Declare a constant scrollBehavior with value "smooth" before the return.

4

Implement smooth scroll on navigation link clicks

Import useRouter from next/router and useEffect from react. Inside the ScrollPage component, use const router = useRouter(). Then use useEffect to listen for changes in router.asPath. When router.asPath contains a hash (like #section1), scroll to the element with that ID using document.getElementById and call scrollIntoView with { behavior: scrollBehavior }. This will create smooth scrolling when navigation links are clicked.

NextJS

import { useRouter } from 'next/router'
import { useEffect } from 'react'

export default function ScrollPage() {
  const scrollBehavior = "smooth"
  const router = useRouter()

  useEffect(() => {
    // Your code here
  }, [router.asPath])

  return (
    
      
        
          Go to Section 1
          Go to Section 2
          Go to Section 3
        
      
      
        
          Section 1
        
        
          Section 2
        
        
          Section 3
        
      
    
  )
}

Need a hint?

Use useRouter to get the current path, then useEffect to scroll smoothly to the element with the ID from the hash.