How to Scroll Back to Top on Route Change in React 18 App

Last Updated on March 4, 2024 by Digamber in React JS

When you are visiting a longer page, it might be an ideal approach to scroll to the top or go back to the top when the URL changes.

It will save your precious time from scrolling all the way to the top. Isn’t it?

In this tutorial, you will ascertain how to scroll to the top when a route or URL changes in React js application.

To build scroll back to top functionality, we will use the latest edition of React Router DOM v6.

To create a smooth scroll to the top on router change, we need to add React hooks and the Router DOM library.

We will create a SmoothScroll wrapper using useEffect, useLocation, and useNavigationType hooks.

Create a custom function, pass children components as an argument, and scroll back to the top using a scrollTop method.

Install React App

Open the terminal, type the command then run the command to install a brand new React app.

npx create-react-app react-blog

Don’t forget to get inside the app folder.

cd react-blog

Add React Router DOM Library

We need to install the Router DOM library to create the desired feature in React. Hence, execute the command to add the router DOM package in React.

npm i react-router-dom --legacy-peer-deps

Create Smooth Scroll Feature

We need a custom function, that handles scroll back to top functionality on url change, hence create the components/SmoothScroll.js file afterwards add the code to the file.

import { useEffect } from "react";
import { useLocation, useNavigationType } from "react-router-dom";

function SmoothScroll({ children }) {
  const location = useLocation();
  const navType = useNavigationType();
  useEffect(() => {
    if (navType !== "POP") {
      window.scrollTo({
        top: 0,
        behavior: "smooth",
      });
    }
  }, [location]);

  return <>{children}</>;
}

export default SmoothScroll;

Create Dashboard Component

Next, you have to make a new file, name it components/Dashboard.js file and insert the given code to the file to create the page layout.

import { Link } from "react-router-dom";

const Dashboard = (props) => {
  return (
    <div style={{ margin: "auto", width: "70%" }}>
      <h2>Dashboard Page</h2>
      <div style={{ backgroundColor: "#B37C8A", height: 750 }}></div>
      <div style={{ backgroundColor: "#225CB5", height: 750 }}></div>
      <div style={{ backgroundColor: "#272727", height: 750 }}></div>
      <Link to="/product">
        <h2>Back to Dashboard</h2>
      </Link>
    </div>
  );
};

export default Dashboard;

Create Product Component

We also need another functional component hence make a brand new file components/Product.js, and don’t forget to put the given code into the file.

import { Link } from "react-router-dom";

const Product = (props) => {
  return (
    <div style={{ margin: "auto", width: "70%" }}>
      <h2>Product page</h2>
      <div style={{ backgroundColor: "#EC42C5", height: 750 }}></div>
      <div style={{ backgroundColor: "#ABB53E", height: 750 }}></div>
      <div style={{ backgroundColor: "#4C84EF", height: 750 }}></div>
      <Link to="/">
        <h2>Back to Dashboard</h2>
      </Link>
    </div>
  );
};

export default Product;

Update App Js File

We are now going to implement the smooth scroll to top feature in React, for that we must open the src/App.js file, and define the given code line-by-line into the file.

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

import Dashboard from './components/Dashboard';
import Product from './components/Product';
import SmoothScroll from './components/SmoothScroll';

const App = () => {
  return (
    <Router>
      <SmoothScroll>
        <Routes>
          <Route path="/" element={<Dashboard />} />
          <Route path="/product" element={<Product />} />
        </Routes>
      </SmoothScroll>
    </Router>
  );
};

export default App;

Run React Server

The functionality is ready, you should start the React development server using given command.

npm start

Here is the url on which you can test the React application.

http://localhost:3000