The Forgotten Art of Scroll Restoration
In the era of client-side rendering and progressive web apps, we’ve lost a fundamental user experience feature: scroll restoration. This article explores a technique to manually restore the scroll position of the browser, ensuring a seamless experience for ecommerce users.
The Problem
Imagine browsing a product listing page (PLP) on an ecommerce website. You scroll down, select a product, and navigate to its description page. When you hit the back button, you expect to be taken back to the exact spot where you left off on the PLP. But, more often than not, you’re taken back to the top of the page, forcing you to scroll down again to find the product you were interested in. This frustration is a result of the browser’s inability to restore the scroll position accurately.
Understanding Scroll Restoration
To grasp the concept of scroll restoration, let’s examine three scenarios:
- Server-rendered web pages: The browser handles scroll restoration perfectly, taking you back to the exact spot where you left off.
- Hybrid pages: The browser struggles to restore the scroll position, often leaving you at the top of the page.
- Client-side applications: Similar to hybrid pages, the browser fails to restore the scroll position accurately.
Implementing Scroll Restoration
To manually restore the scroll position, we’ll use JavaScript to find the product to which we need to restore the scroll location. We’ll cover implementing scroll restoration in a React application, but the principles apply to hybrid pages as well.
Step 1: Storing a Reference of the Selected Product
We’ll use sessionStorage to store the ID of the selected product. This allows us to retrieve the ID when the user navigates back to the PLP.
Step 2: Manually Restoring the Scroll to a Previously Selected Product
We’ll use a callback function in setState to render the rest of the application and then pass a restorationRef through to the ProductCard that needs to be scrolled into view.
Step 3: Conditionally Restoring Scroll to Previously Selected Product
To avoid confusion, we’ll add a check to our lazy state initialization function to determine if the user is moving back to the listing page or navigating to it from another page.
Step 4: Scroll Restoration for Listing Pages with Infinite Loading
When dealing with infinite loading listing pages, we need to keep track of the page being loaded. We’ll update the URL with the page number, allowing us to use the page number in the URL bar for our scroll restoration.
Going the Extra Mile
To create a truly exceptional user experience, consider implementing:
- Skeleton loaders to prefill the page with placeholder products
- Utilizing the scrollRestoration property to tell the browser we’re handling scroll restoration
- Accessibility features to ensure focus is given to the correct element when navigating back
Final Thoughts
By implementing scroll restoration, we can create ecommerce websites that are easy to navigate and trustworthy. Don’t let this simple feature fall by the wayside – take control of your users’ experience today!