Skip to content
Related Articles

Related Articles

Improve Article

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

  • Difficulty Level : Medium
  • Last Updated : 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.




My Personal Notes arrow_drop_up
Recommended Articles
Page :