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 */}
    
  )
}

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
        
      
    
  )
}

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
        
      
    
  )
}

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
        
      
    
  )
}

Hint

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

Practice

1. What does setting behavior: 'smooth' in window.scrollTo do in a Next.js app?

easy

A. It reloads the page after scrolling.

B. It makes the page scroll smoothly instead of jumping instantly.

C. It scrolls the page to the top instantly.

D. It disables scrolling on the page.

Solution

1. Step 1: Understand the scroll behavior option

   The behavior property controls how scrolling happens. Setting it to 'smooth' means the scroll moves gradually.

2. Step 2: Apply to Next.js scrolling

   Using window.scrollTo({ behavior: 'smooth' }) in Next.js makes the page scroll smoothly instead of jumping instantly.

3. Final Answer:

   It makes the page scroll smoothly instead of jumping instantly. -> Option B

4. Quick Check:

   behavior: 'smooth' = smooth scrolling [OK]

Hint: Remember 'smooth' means gradual scroll, not instant jump [OK]

Common Mistakes:

• Thinking 'smooth' disables scrolling
• Confusing 'smooth' with instant scroll
• Assuming it reloads the page

2. Which of the following is the correct syntax to scroll smoothly to the top of the page in Next.js?

easy

A. window.scrollTo({ smooth: 'top' });

B. window.scrollTo(0, 0, 'smooth');

C. window.scrollTo({ top: 0, smooth: true });

D. window.scrollTo({ top: 0, behavior: 'smooth' });

Solution

1. Step 1: Review window.scrollTo syntax

   The correct syntax uses an object with top and behavior keys: { top: 0, behavior: 'smooth' }.

2. Step 2: Identify correct option

   window.scrollTo({ top: 0, behavior: 'smooth' }); matches the correct syntax. Others misuse parameters or keys.

3. Final Answer:

   window.scrollTo({ top: 0, behavior: 'smooth' }); -> Option D

4. Quick Check:

   Correct scrollTo syntax = window.scrollTo({ top: 0, behavior: 'smooth' }); [OK]

Hint: Use object with top and behavior keys for smooth scroll [OK]

Common Mistakes:

• Passing parameters as separate arguments instead of object
• Using incorrect keys like 'smooth' instead of 'behavior'
• Misplacing the 'smooth' value

3. Consider this Next.js code snippet inside a component:
<pre>useEffect(() => { router.events.on('routeChangeComplete', () => { window.scrollTo({ top: 0, behavior: 'smooth' }); }); }, []);
What will happen when the route changes?

medium

A. The page will smoothly scroll to the top after navigation.

B. Nothing will happen because the event listener is not removed.

C. The page will jump instantly to the top.

D. The page will reload after scrolling.

Solution

1. Step 1: Understand event listener on routeChangeComplete

   The code listens for the route change completion event and triggers scrolling.

2. Step 2: Analyze scrollTo call

   It calls window.scrollTo with behavior: 'smooth', so scrolling is smooth to top.

3. Final Answer:

   The page will smoothly scroll to the top after navigation. -> Option A

4. Quick Check:

   routeChangeComplete + smooth scroll = smooth scroll top [OK]

Hint: routeChangeComplete triggers smooth scroll to top [OK]

Common Mistakes:

• Assuming instant jump instead of smooth scroll
• Thinking event listener removal is required to trigger scroll
• Confusing scroll with page reload

4. This Next.js code tries to scroll smoothly on route change:
<pre>useEffect(() => { router.events.on('routeChangeComplete', () => { window.scrollTo({ top: 0, behavior: 'smooth' }); }); }, []);
But after navigating multiple times, scrolling stops working. What is the likely problem?

medium

A. The event listener is added multiple times without cleanup, causing issues.

B. The scrollTo syntax is incorrect and causes errors.

C. Next.js does not support scroll control on route changes.

D. The behavior 'smooth' is not supported in modern browsers.

Solution

1. Step 1: Identify event listener management

   The code adds an event listener on mount but never removes it, so multiple listeners accumulate.

2. Step 2: Understand effect of multiple listeners

   Multiple listeners cause unexpected behavior or conflicts, stopping scroll from working properly.

3. Final Answer:

   The event listener is added multiple times without cleanup, causing issues. -> Option A

4. Quick Check:

   Missing cleanup causes multiple listeners = problem [OK]

Hint: Always remove event listeners in useEffect cleanup [OK]

Common Mistakes:

• Ignoring cleanup of event listeners
• Blaming scrollTo syntax which is correct
• Assuming browser support is the issue

5. You want to scroll smoothly to a specific section with id 'contact' after navigating to a new page in Next.js. Which approach correctly achieves this?

hard

A. Use window.scrollTo(0, 0); after navigation and then call scrollIntoView without behavior option.

B. Use window.scrollTo({ top: document.getElementById('contact').offsetTop, behavior: 'auto' }); inside routeChangeStart event.

C. Use router.events.on('routeChangeComplete', () => { document.getElementById('contact').scrollIntoView({ behavior: 'smooth' }); });

D. Use router.push('/contact'); without any scroll control; rely on default browser behavior.

Solution

1. Step 1: Choose correct event and method

   Use routeChangeComplete to ensure page is loaded, then scroll to element with smooth behavior.

2. Step 2: Verify scrollIntoView usage

   scrollIntoView({ behavior: 'smooth' }) scrolls smoothly to the element with id 'contact'.

3. Final Answer:

   Use router.events.on('routeChangeComplete', () => { document.getElementById('contact').scrollIntoView({ behavior: 'smooth' }); }); -> Option C

4. Quick Check:

   routeChangeComplete + scrollIntoView smooth = Use router.events.on('routeChangeComplete', () => { document.getElementById('contact').scrollIntoView({ behavior: 'smooth' }); }); [OK]

Hint: Scroll after routeChangeComplete using scrollIntoView with smooth [OK]

Common Mistakes:

• Using routeChangeStart instead of routeChangeComplete
• Forgetting behavior: 'smooth' for smooth scroll
• Relying on default scroll without control