DEV Community

codeek
codeek

Posted on

🚀Enhance Your React App With Seamless Scroll Restoration Tips For A Better User Experience

#react #frontend #frontendchallenge #ux

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: ScrollRestoration works 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

  1. Open your products page.
  2. Scroll halfway down.
  3. Open any product.
  4. 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 ScrollRestoration inside the root layout.
  • Use Data Router (createBrowserRouter).
  • Test browser Back and Forward buttons.
  • Combine with ScrollToTop when needed.
  • Use getKey only 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! 🚀

Top comments (0)