Understanding the Problem

When building React applications, especially Single Page Applications (SPAs) using React Router, you might expect the page to scroll to the top automatically when navigating to a new route or after re-rendering a component. But sometimes it doesn’t scroll at all, the user stays at the bottom or middle of the page, even after navigation.

Example:

You navigate from /products to /about, and even though it’s a new page, the scroll stays at the bottom of the screen.

Why This Happens

  1. React doesn’t refresh the page like traditional websites. It updates only the components.
  2. Using window.scrollTo(0, 0) immediately after render may not work because the DOM might not be fully updated.
  3. React batches DOM updates if your scroll logic happens before React finishes rendering, it won’t take effect.
  4. Navigating with react-router-dom doesn’t automatically reset scroll position.

Real-World Fix: Scroll to Top After Navigation

You need a component that listens for route changes and scrolls to the top after the DOM is ready.

Solution Code: ScrollToTop.js

// ScrollToTop.jsimport { useEffect } from “react”;

import { useLocation } from “react-router-dom”;

 

const ScrollToTop = () => {

  const { pathname } = useLocation();

 

  useEffect(() => {

    // Scroll after route change and render

    const timeout = setTimeout(() => {

      window.scrollTo({ top: 0, behavior: “smooth” });

    }, 0);

 

    // Clean up timeout

    return () => clearTimeout(timeout);

  }, [pathname]);

 

  return null;

};

 

export default ScrollToTop;

Also Read: How to Convert HTML Website to ReactJS?

How to Use It in Your App

Make sure you include <ScrollToTop /> inside your main layout component, usually above the <Routes> block:

import { BrowserRouter as Router, Routes, Route } from “react-router-dom”;import ScrollToTop from “./ScrollToTop”;

 

function App() {

  return (

    <Router>

      <ScrollToTop />

      <Routes>

        <Route path=”/” element={<Home />} />

        <Route path=”/about” element={<About />} />

        {/* Add your other routes */}

      </Routes>

    </Router>

  );

}

Bonus Tip: Use behavior: “smooth” for better UX

If you want a smooth transition (not an instant jump), make sure you use:

window.scrollTo({ top: 0, behavior: “smooth” });

Summary

  • React SPA doesn’t auto-scroll when navigating.
  • You must manually handle it using a custom scroll component.
  • Delay the scroll until after route and DOM updates.
  • Use useLocation from react-router-dom and useEffect.