Site icon RemoteStack

React Smooth Scroll to Top on Page or Route Change Tutorial

React scroll to top on route change example. What if you have a long web page? In that case, you will keep scrolling down. From the experience outlook, this method is not effective.

We can manage scroll restoration in React effortlessly with React Router DOM v6 library. This guide will show you how to smoothly scroll to top or go back to top when the route changes or url changes.

We will create a simple React app, add a few components, and build scroll to top when a user reaches the end of the page functionality using the ScrollTop wrapper.

We will create this scroll-to-top wrapper with useEffect, useLocation, and useNavigationType hooks.

Create React Project

Open the terminal, execute the command create a React app, then move into app folder.

npx create-react-app my-react-app
cd my-react-app

Install React Router DOM v6

Next, install the React Router DOM library in React application to create the dynamic routes.

npm install react-router-dom

Build Scroll Restoration

Create the features/ScrollTop.js file, then in this file, add the following code to this file.

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

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

  return <>{children}</>;
}

export default ScrollTop;

Create Home Component

Create a new component name it features/Home.js, insert the following code into the file.

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

const Home = (props) => {
  return (
    <div style={{ margin: "auto", width: "75%" }}>
      <h2>Home Page</h2>
      <div style={{ backgroundColor: "#F38C8E", height: 800 }}></div>
      <div style={{ backgroundColor: "#548FA6", height: 800 }}></div>
      <div style={{ backgroundColor: "#171717", height: 800 }}></div>
      <Link to="/profile">
        <h2>Back to Home</h2>
      </Link>
    </div>
  );
};

export default Home;

Create Profile Component

Create another component, name it features/Profile.js, then add the given code to the file.

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

const Profile = (props) => {
  return (
    <div style={{ margin: "auto", width: "75%" }}>
      <h2>Profile</h2>
      <div style={{ backgroundColor: "#FE70B6", height: 800 }}></div>
      <div style={{ backgroundColor: "#FFC44D", height: 800 }}></div>
      <div style={{ backgroundColor: "#5D95FE", height: 800 }}></div>
      <Link to="/">
        <h2>Back to Home</h2>
      </Link>
    </div>
  );
};

export default Profile;

Implement Scroll To Top on Page Change

Head over to src/App.js file, Import the components, then wrap those components using the ScrollTop wrapper.

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import ScrollTop from "./features/ScrollTop";
import Home from "./features/Home";
import Profile from "./features/Profile";

const App = () => {
  return (
    <Router>
      <ScrollTop>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/profile" element={<Profile />} />
        </Routes>
      </ScrollTop>
    </Router>
  );
};

export default App;

Start Application

We now have to invoke the React application, therefore run the following command.

npm start
http://localhost:3000

Conclusion

In an app, a user navigates to various pages — React Router DOM evokes dynamic routing in a React app.

In this React Route scroll restoration example: we found out how to Scroll to the Top when web page’s route changes and how to add a smooth transition to scroll to top functionality.

Exit mobile version