Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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.

Prerequisite:

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.

Javascript




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


Javascript




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


Javascript




//Styling.js
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;
`;


Javascript




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


Javascript




//Home.js
import React from 'react'
import GoToTop from './GoToTop'
import { Header, Button, Content, RouterLink } from "./Styling";
const Home = () => {
    return (
        <div>
            <Header>GeeksForGeeks Homepage</Header>
            <Content></Content>
            <RouterLink to='/about'>
                <Button>About Us</Button>
            </RouterLink>
            <Content></Content>
            <GoToTop />
        </div>
    )
}
 
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



Last Updated : 25 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads