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>w3wiki 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>w3wiki 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
How to make your page scroll to the top when route changes?
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.