How to Scroll to Top on Page Change in React JS

In today’s tutorial, we will learn how to implement scroll to top on page or route change in React JS. While building single-page apps in React, we may encounter an issue where the user has to manually scroll to the top of the page every time when the user navigates to a new route or page.

Implement Scroll to Top on Route Change in React

In this tutorial, we are going to use React Router Dom v6 and functional components to implement the “scroll to top” functionality that will automatically scroll back to the top of the page when the user navigates to a new route.

Step 1: Install Required Dependencies

First, we need to install the react-router-dom library by running the following command.

npm install react-router-dom

Step 2: Set Up React Router

Next, we will set up React Router in your application. This will allow us to handle page changes and navigate between different routes.

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import HomePage from './HomePage';
import AboutPage from './AboutPage';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
      </Routes>
    </Router>
  );
}

export default App;

Here, we have defined two routes, one with a path of “/” which will render the `HomePage` component, and another with a path of “/about” which will render the `AboutPage` component.

Step 3: Create a Scroll To Top Component

Next, we will create a `ScrollToTop` component that will handle scrolling to the top of the page.

import { useEffect } from "react";
import { useLocation } from "react-router";

const ScrollToTop = ({ children }) => {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
};

export default ScrollToTop;

Inside the `ScrollToTop` component, we are using the `useLocation` hook to get the current location of the user in the application, which is stored in the `pathname` variable. Then we are using the `window.scrollTo(0,0)` method to scroll the page to the top whenever the `pathname` variable changes.

The `ScrollTopTop` component returns null because we don’t want to render any visible content on the page, it just needs to handle the scrolling behavior.

Step 4: Add ScrollToTop Component to React Router

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import ScrollToTop from './ScrollToTop';
import HomePage from './HomePage';
import AboutPage from './AboutPage';

function App() {
  return (
    <Router>
      <ScrollToTop />

      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
      </Routes>
    </Router>
  );
}

export default App;

Finally, we have added the `ScrollToTop` component before the `Routes` component in the `App` component. This will ensure that the page is scrolled to the top whenever the route changes.

GitHub Repository

Also, check out:

That’s it, we have implemented a simple functionality that automatically scrolls the page to the top whenever the user navigates to a new route in React JS. Hope it was helpful.