Scroll to the top of the page after render in ReactJS
Today we will show you how to scroll to the top of the page after render in ReactJS. In other words, When you are redirecting from one route to the other route at that time might be you need “scroll to the top” because of the long content page. So we will show you how to do it.
Scroll to the top of the page after render in ReactJS, react-router-dom scroll to top, react scroll to top on route change, react scroll to element after render, window.scrollto(0 0) not working react, react scroll to bottom after render, Scroll Restoration – React Router, Scrolling to top on component render.
Checkout more articles on ReactJS
Issue:
In the react component I display a long list of data and a few links at the bottom. After clicking on any of these links I fill in the list with a new collection of links and need to scroll to the top.
The problem is – how to scroll to the top after a new collection is rendered?
Steps to implement scroll to the top of the page after render in ReactJS
- Set up react application
- Create top level component to manage the scroll
- Wrap scroll component to the application
- Output
1. Set up react application
Let’s create the react application and implement routing in application for the redirection purpose. If you don’t know how to create a routing in react app then refer to the following link.
Routing in React JS2. Create top level component to manage the scroll
Now let’s create a component as ScrollToTop where we will listen to the history and set window scroll to top on componentDidMount. You can also ignore the routes for scroll to the top as well. Here we are using the React Hooks to manage the scroll position.
ScrollToTop.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | import { useEffect } from "react"; import { useLocation } from "react-router-dom"; function ScrollToTop({ children }) { const { pathname } = useLocation(); useEffect(() => { if (pathname != "/contact") window.scrollTo(0, 0); }, [pathname]); return children; } export default ScrollToTop; |
NOTE: Make sure you have a react-router-dom version is greater than 5.1 to use useLocation.
3. Wrap scroll component to the application
At last we need to set the ScrollToTop component at the top level of the application.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import { BrowserRouter, Switch, Route, Link } from 'react-router-dom'; import App from './App'; import About from './About'; import Contact from './Contact'; import ScrollToTop from './ScrollToTop'; const routing = ( <BrowserRouter> <ScrollToTop> <div> <h3>Clue Mediator</h3> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> <li> <Link to="/contact">Contact</Link> </li> </ul> <Switch> <Route exact path="/" component={App} /> <Route path="/about" component={About} /> <Route path="/contact" component={Contact} /> </Switch> </div> </ScrollToTop> </BrowserRouter> ) ReactDOM.render(routing, document.getElementById('root')); |
4. Output
Thank you for reading! Happy Coding!
Good
We are glad you like the article. Subscribe us for weekly updates or like and follow us for regular updates.
Happy Coding..!!