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.