🚀Enhance Your React App With Seamless Scroll Restoration Tips For A Better User Experience
One of the easiest ways to improve your React application's user experience is by preserving the user's scroll position during navigation. Imagine a user browsing through hundreds of products. They click a product, read its details, press the browser's Back button, and instead of returning to where they left off, they are taken back to the top of the page. React Router solves this problem with the built-in ScrollRestoration component, making navigation feel smooth and natural. Without scroll res
One of the easiest ways to improve your React application's user experience is by preserving the user's scroll position during navigation.
Imagine a user browsing through hundreds of products. They click a product, read its details, press the browser's Back button, and instead of returning to where they left off, they are taken back to the top of the page. React Router solves this problem with the built-in ScrollRestoration component, making navigation feel smooth and natural.
Why Scroll Restoration Matters
Without scroll restoration:
- ❌ Users lose their place on long pages.
- ❌ Extra scrolling creates frustration.
- ❌ Navigation feels broken.
With scroll restoration:
- ✅ Restores previous scroll position.
- ✅ Better ecommerce experience.
- ✅ Improves blogs, dashboards, and documentation sites.
- ✅ Makes browser Back/Forward navigation seamless.
Prerequisites
Install React Router if you haven't already.
npm install react-router-dom
Enter fullscreen mode Exit fullscreen mode
Note:
ScrollRestorationworks with React Router's Data Router APIs (createBrowserRouter+RouterProvider).
Project Structure
src/
├── App.jsx
├── main.jsx
├── layouts/
│ RootLayout.jsx
├── pages/
│ Home.jsx
│ Products.jsx
│ ProductDetails.jsx
Enter fullscreen mode Exit fullscreen mode
Step 1: Create the Root Layout
import {
Outlet,
ScrollRestoration,
} from "react-router-dom";
export default function RootLayout() {
return (
<>
<Outlet />
<ScrollRestoration />
</>
);
}
Enter fullscreen mode Exit fullscreen mode
Place ScrollRestoration only once inside your root layout.
Step 2: Configure React Router
import {
createBrowserRouter,
RouterProvider,
} from "react-router-dom";
import RootLayout from "./layouts/RootLayout";
import Home from "./pages/Home";
import Products from "./pages/Products";
import ProductDetails from "./pages/ProductDetails";
const router = createBrowserRouter([
{
element: <RootLayout />,
children: [
{
path: "/",
element: <Home />,
},
{
path: "/products",
element: <Products />,
},
{
path: "/products/:id",
element: <ProductDetails />,
},
],
},
]);
export default function App() {
return <RouterProvider router={router} />;
}
Enter fullscreen mode Exit fullscreen mode
Step 3: Test the Feature
- Open your products page.
- Scroll halfway down.
- Open any product.
- Click the browser Back button.
You'll return to the exact scroll position where you left off.
Custom Scroll Restoration Keys
React Router allows customizing how scroll positions are stored.
<ScrollRestoration
getKey={(location) => location.pathname}
/>
Enter fullscreen mode Exit fullscreen mode
This is useful when you want different history entries that share the same pathname to reuse the same scroll position.
Optional: Scroll to Top on New Pages
Sometimes you want:
- Restore scroll on browser Back
- Scroll to the top for fresh page navigations
Create a helper component.
import { useEffect } from "react";
import { useLocation } from "react-router-dom";
export default function ScrollToTop() {
const { pathname } = useLocation();
useEffect(() => {
window.scrollTo(0, 0);
}, [pathname]);
return null;
}
Enter fullscreen mode Exit fullscreen mode
Then include it in your layout.
<>
<ScrollToTop />
<Outlet />
<ScrollRestoration />
</>
Enter fullscreen mode Exit fullscreen mode
Ecommerce Example
Without Scroll Restoration
Products
⬇️ Scroll to Product #120
↓
Open Product
↓
Back
❌ Returns to Product #1
Enter fullscreen mode Exit fullscreen mode
With Scroll Restoration
Products
⬇️ Scroll to Product #120
↓
Open Product
↓
Back
✅ Returns to Product #120
Enter fullscreen mode Exit fullscreen mode
Best Practices
- Keep
ScrollRestorationinside the root layout. - Use Data Router (
createBrowserRouter). - Test browser Back and Forward buttons.
- Combine with
ScrollToTopwhen needed. - Use
getKeyonly for custom behavior.
Conclusion
Small UX improvements make a huge difference. ScrollRestoration is one of those features that users rarely notice when it works—but immediately notice when it's missing. With just a few lines of code, your React application can provide a much smoother browsing experience, especially for ecommerce websites, blogs, and dashboards.
📺 Watch the Complete Video Tutorial
If you'd like to see the implementation step by step, watch the full tutorial:
🎥 Enhance Your React App With Seamless Scroll Restoration Tips For A Better User Experience
https://www.youtube.com/watch?v=1zmOrQ61s3I
🛒 Build a Complete React Ecommerce Application
Want to master React by building a real-world project?
Check out my Complete React Ecommerce Series, where you'll build a production-ready ecommerce application from scratch.
You'll learn:
- ⚛️ React & React Router
- 🔥 Firebase Authentication
- 💳 Payment integration with Stripe
- 🛒 Shopping Cart
- ❤️ Wishlist
- 🔍 Product Search & Filtering
- 🌙 Dark Mode
- 📱 Responsive Design
- 🚀 Deployment
- And much more!
🎥 Watch the Complete Ecommerce Playlist
https://www.youtube.com/watch?v=SdITjnl-zo8
If this article helped you, consider leaving a ❤️ and following for more React tutorials.
Happy Coding! 🚀
