Scroll behavior control in NextJS - Step-by-Step Execution

Concept Flow - Scroll behavior control

User clicks link or triggers scroll

↓

Next.js router intercepts event

↓

Check scroll behavior setting

↓

auto

↓

Scroll instantly

↓

Page view updated

When a user triggers navigation or scroll, Next.js checks the scroll behavior setting and scrolls the page instantly, smoothly, or not at all.

Execution Sample

NextJS

import { useRouter } from 'next/router';

const MyComponent = () => {
  const router = useRouter();
  
  const handleClick = () => {
    router.push('/about', undefined, { scroll: false });
  };

  return <button onClick={handleClick}>Go to About</button>;
};

This code navigates to '/about' without scrolling to the top automatically.

Execution Table

Step	Action	Scroll Behavior Option	Scroll Action	Page View
1	User clicks button	N/A	N/A	Current page visible
2	router.push called with scroll:false	false	No scroll performed	New page loaded, scroll position unchanged
3	Page content renders	false	No scroll performed	User sees new page at previous scroll position
4	User clicks link with default scroll	true (default)	Scroll to top instantly	New page loaded, scrolled to top
5	User clicks link with smooth scroll option	smooth	Scroll to top smoothly	New page loaded, scroll animates to top
6	User triggers manual scroll control	manual	No automatic scroll	Page scroll controlled by custom code
7	End of navigation	N/A	Scroll behavior complete	Page view stable

💡 Navigation ends after scroll behavior completes or is skipped based on option

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	After Step 6	Final
scrollBehaviorOption	undefined	false	false	true (default)	smooth	manual	manual
scrollPosition	top or current	unchanged	unchanged	top	animating to top	unchanged	unchanged
pageView	home page	about page loaded	about page loaded	new page loaded	new page loaded	new page loaded	new page loaded

Key Moments - 3 Insights

Why does the page sometimes not scroll to the top after navigation?

Because the scroll option was set to false in router.push (see execution_table step 2), Next.js skips automatic scrolling.

What happens if the scroll behavior is set to 'smooth'?

The page scrolls to the top with a smooth animation instead of instantly (see execution_table step 5).

Can you control scroll manually during navigation?

Yes, by setting scroll behavior to manual and handling scroll yourself in code (see execution_table step 6).

Visual Quiz - 3 Questions

Look at the execution table, what is the scroll action at step 2?

A Scroll to top instantly

B No scroll performed

C Scroll to top smoothly

D Page reloads

💡 Hint

Check the 'Scroll Action' column for step 2 in the execution_table

At which step does the page scroll smoothly to the top?

A Step 5

B Step 4

C Step 3

D Step 6

💡 Hint

Look for 'smooth' in the 'Scroll Behavior Option' column in execution_table

If you want to keep the scroll position unchanged after navigation, which scroll option should you use?

A true

B smooth

C false

D manual

💡 Hint

Refer to variable_tracker for scrollBehaviorOption and scrollPosition after step 2

Concept Snapshot

Next.js scroll behavior controls how the page scrolls after navigation.
Use router.push(url, undefined, { scroll: false }) to prevent scrolling.
Default scroll is instant to top.
'smooth' option scrolls with animation.
'manual' lets you handle scroll yourself.
Choose based on user experience needs.

Full Transcript

This visual trace shows how Next.js controls scroll behavior during navigation. When a user clicks a link or triggers navigation, Next.js checks the scroll option. If set to false, the page does not scroll and keeps the current position. If true or default, it scrolls instantly to the top. If set to smooth, it scrolls with animation. Manual lets developers control scroll themselves. The execution table tracks each step from user action to page view update, showing scroll behavior and page state changes. Variable tracker shows how scroll options and positions change. Key moments clarify common confusions about when and why scrolling happens or not. The quiz tests understanding of scroll actions at different steps. This helps beginners see exactly how scroll control works in Next.js navigation.

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