When user reloads the page
When the user reloads the page, the browser resets the scroll position to the top by default. To maintain the scroll position upon page reload, you can use the beforeunload event to store the scroll position in the browser’s sessionStorage, and then retrieve and set it on page load.
Example: Below is an example when user reloads the page.
What is ScrollRestoration in React Router
In React Router, scrollRestoration is a feature that helps maintain the scroll position of a webpage when navigating between different routes within a single-page application. When enabled, it ensures that when a user goes back or forward in their browsing history, the page remembers where they were scrolled to previously, rather than resetting to the top of the page.
This feature enhances the user experience by providing seamless navigation within the application without disrupting their reading or browsing flow. By default, the React Router does not handle scroll restoration. In this article, we’ll learn about ScrollRestoration in detail.
Table of Content
- ScrollRestoration when user navigates to a different page
- When user reloads the page
- getKey Prop
- Preventing Scroll Reset