If you already have a subscription, you can sign in.
Enjoy free content straight from your inbox 💌
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.