Scroll to the top of the page after render in ReactJS

by Clue Mediator · December 23, 2019

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 JS

2. 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

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;

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.

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'));

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 = (

<div>

<h3>Clue Mediator</h3>

<ul>

<li>

</li>

<li>

<Link to="/about">About</Link>

</li>

<li>

<Link to="/contact">Contact</Link>

</li>

</ul>

</Switch>

</div>

</ScrollToTop>

</BrowserRouter>

)

ReactDOM.render(routing, document.getElementById('root'));

4. Output

Output - Scroll to the top of the page after render in ReactJS - Clue Mediator — Output – Scroll to the top of the page after render in ReactJS – Clue Mediator

Thank you for reading! Happy Coding!

Demo & Source Code

Github Repository StackBlitz Project

If you found value in this article,
you can support us by buying me a coffee! ☕

Scroll to the top of the page after render in ReactJS

Issue:

Steps to implement scroll to the top of the page after render in ReactJS

1. Set up react application

2. Create top level component to manage the scroll

3. Wrap scroll component to the application

4. Output

Demo & Source Code

You may also like...

2 Responses

Leave a Reply Cancel reply

Search your query

JOIN OUR NEWSLETTER

Recent Posts

Join us

Scroll to the top of the page after render in ReactJS

Issue:

Steps to implement scroll to the top of the page after render in ReactJS

1. Set up react application

2. Create top level component to manage the scroll

3. Wrap scroll component to the application

4. Output

Demo & Source Code

You may also like...

Create a tags input component in React

Convert HTML element or document into Image in React

Handle the onChange Event on a Select Element in React with Hooks

Draw a route between two points using Google Maps API in React

How to reset the state of a Redux store

Create an npm package using Create React App

2 Responses

Leave a Reply Cancel reply

Search your query

JOIN OUR NEWSLETTER

Recent Posts

Tags

Join us