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

08 Mar, 2021
Suppose we click on the About Us button, we are directed to a different page, but it doesn’t load from the top. We have to scroll up ourselves to see the content from the beginning. Our new page loads from the height at which our About Us button (of the previous page) was.
This happens because react-router-dom only knows to change the route. It cannot load the page from a different position. So, we have to make a different functional component for loading our page from the top when we change the route.
Prerequisite:
Basic knowledge of npm & create-react-app command.
Basic knowledge of styled-components.
Basic knowledge of useEffect React hooks.
Basic knowledge of react-router-dom.
Basic Setup: You will start a new project using create-react-app command as shown below.
npx create-react-app react-router-scroll
Now go to your react-router-scroll folder by typing the given command in the terminal.
cd react-router-scroll
Required module: 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
Now create the components folder in src folder then go to the components folder and create four files Home.js, About.js, Styling.js, GoToTop.js.
Project Structure: The file structure in the project will look like this.
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.
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
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
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;`; 
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;}
Explanation: 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.
App.js
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;
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/, you will see the following output. We can observe that the new route page is loading from the top as shown below.
Picked
React-Questions
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set background images in ReactJS ?
How to create a table in ReactJS ?
ReactJS useNavigate() Hook
How to navigate on path by button click in react router ?
React-Router Hooks
Roadmap to Become a Web Developer in 2022
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to insert spaces/tabs in text using HTML/CSS?