Open In App

How to make your page scroll to the top when route changes?

Last Updated : 25 Dec, 2023
Like Article

Clicking the “About Us” button in a React application doesn’t automatically scroll to the top of the page load, as react-router-dom only changes the route without resetting the scroll position; a separate functional component is needed to ensure the new page loads from the top when the route changes.


Steps to Create React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app react-router-scroll

Step 2: After creating your project folder i.e. folder name, move to it using the following command:

cd react-router-scroll

Step 3: Install the dependencies required in this project by typing the given command in the terminal.

npm install react-router-dom
npm install --save styled-components

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.17.0",
"react-scripts": "5.0.1",
"styled-components": "^6.1.1",
"web-vitals": "^2.1.4",

Approach to implement scroll to top:

We initialize a variable by the name routePath and store the value of the current URL in it which is returned with useLocation() hooks. 

  • Now a function onTop is created which loads the webpage from the top whenever it is called. We pass this function as the first parameter (as a callback function) and our variable routePath as the second parameter (as a dependency) to our useEffect hooks. It means that our function onTop will only execute if the dependency routePath has changed between rendering. 
  • When we click on the About Us button, the value of routePath gets changed (as we are going to a new URL) and the function onTop gets triggered which loads our page from the top.

Example: In this example, we will design a functional component that loads our router page from the top, for that we will need to manipulate the App.js file and other created components file.


import {
    BrowserRouter as Router,
    Switch, Route
} from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
function App() {
    return (
                <Route path="/"
                    component={Home} />
                <Route path="/about"
                    component={About} />
export default App;


import { useEffect } from "react";
import { useLocation } from "react-router-dom";
export default function GoToTop() {
    const routePath = useLocation();
    const onTop = () => {
        window.scrollTo(0, 0);
    useEffect(() => {
    }, [routePath]);
    return null;


import { Link } from 'react-router-dom';
import styled from 'styled-components';
export const Header = styled.h1`
   margin: 0;
   padding: 0;
   text-align: center;
   color: green;
export const Content = styled.div`
   overflowY: scroll;
   height: 700px;
export const RouterLink = styled(Link)`
   cursor: pointer;
   transition: all 0.2s ease-in-out;
   text-decoration: none;
export const Button = styled.button`
  padding: 20px;
  font-size: 20px;
  position: relative;
  left: 42%;
  margin: 20px;
  cursor: pointer;


import React from 'react'
import GoToTop from './GoToTop';
import { Header, Button, Content, RouterLink } from "./Styling";
const About = () => {
    return (
            <Header>GeeksForGeeks About Us</Header>
            <RouterLink to='/'>
                <Button>Return to Homepage</Button>
            <GoToTop />
export default About


import React from 'react'
import GoToTop from './GoToTop'
import { Header, Button, Content, RouterLink } from "./Styling";
const Home = () => {
    return (
            <Header>GeeksForGeeks Homepage</Header>
            <RouterLink to='/about'>
                <Button>About Us</Button>
            <GoToTop />
export default Home

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000

Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads