Navigation Scroll with Link

Pro Members Only

This lesson is available if you have an active subscription.

Alternatively, some member might be able to gift it to you.

If you already have a subscription, you can sign in.

Navigation Scroll with Link

Subscription Required

You must have an active subscription to access this content.
If you already have a subscription, you can sign in.

Native Navigation Scroll Behaviour

Browser have two kinds of behaviours when it comes to scrollbar + navigation.

  • If you do an explicit full page navigation (e.g. by entering an address in the address bar), browsers scroll to top of the new page.
  • If you use back and forwards, browser will preserve the scroll position.

NextJS Link scroll

The nextjs Link component does a default (scroll={true}) full page style navigation and scrolls to the top of the page upon navigation complete.

However you can explicitly pass scroll={false} to give a "scroll preserved" experience (more akin to browser back and forward).

Both these options are demonstrated in the example below.

app/page.tsx
app/alpha/page.tsx
app/beta/page.tsx
import Link from "next/link";

export default function Page() {
return (
<div>
<Link href="/alpha">Alpha</Link>
<Link href="/beta">Beta</Link>
</div>
);
}
javascript
typescript
react
playwright

Enjoy free content straight from your inbox 💌

No spam, unsubscribe at any time.

Transcript

00:00

Since the next year, S Link component does smart client center navigation by replacing only the components on screen that change between the routes, it gives you an easy way to choose a navigation scroll behavior, so it feels more like a browser back and forward style navigation. To demonstrate this prop, we have two pages, alpha and beta, and both pages have a bunch of items to demonstrate the relationship between scroll bar and navigation. With browsers and scroll bars, there are actually two kinds of navigations. First is a full page navigation. If the user explicitly decides to go from one page

00:33

to another, then the browser automatically scrolls to the top of the new page that it loads. As an example, even though we are scrolled down a bit on this page to item number four, if you explicitly visit beta, you can see that the browser has automatically taken us to the top of the new page. The other form of navigation is back and forward style navigation. So if you scroll to item number two within beta and use the browser back button, you can see that it's remembering the position of alpha, which is item number four, and the position of beta, which is item number two. Now let's take a look at the default behavior

01:06

of the link component within next years. We add a link in alpha to beta, and similarly within the beta page, we add a link back to alpha. Now if you navigate using this link component from alpha to beta and from beta back to alpha, you can see that the scroll position is resetting to the top, and this is the default behavior of the link component. It automatically re resets the scroll position to the top. Upon navigation, we can actually control this behavior using the scroll prop. It has the default value of Drew, which always scrolls to the top. However, we can exclusively pass in a false so

01:40

that next JS will not try to do a scroll to top. And then instead of a full page navigation experience, you will get more of a back and forward style experience. We make the modification to both the pages and then jump into the browser. Now as you go from alpha, then scroll down to the bottom to navigate to beta. You can see that as we navigate the scroll position is being preserved.