<ScrollBehavior />

One automatically handles resetting scrolling to window.location.hash and changing scroll position to the top when you navigate to a new page.

It also remembers your scroll position on each page you've visited and restores that position when you navigate back or forward to it. This mimics the default behavior that browsers do with multi-page apps.

You can control this behavior by importing the ScrollBehavior component once in your app (we'd recommend doing so in your root _layout.tsx) and returning it in your component's virtual DOM.

ScrollBehavior accepts a disabled prop which takes values of type boolean or string "restore". If set to "restore," the scroll position will only reset to the top on new page navigation, but won't be restored to the previous scroll position when navigating back/forward.

In general, you shouldn't need to use this component, but it may be helpful in specialized use cases where you need more control over the scroll restoration logic.

Edit this page on GitHub.