React: Scroll to Top Instantly After Router Transition

In a React application, it’s common to want to scroll to the top of the page instantly after a router transition, such as when navigating to a new page or route. This provides a smooth user experience and ensures that the user starts reading the new content from the top of the page. To achieve this, you can use JavaScript’s window.scrollTo() method with the behavior: 'instant' option. In this article, we’ll explore how to implement this behavior in a React application.

Prerequisites

Before you proceed, make sure you have a React application set up with React Router. If you haven’t already, you can create a new React application using Create React App or any other preferred method.

Implementation

To scroll to the top of the page instantly after a router transition, you’ll need to perform the following steps:

1. Import the necessary modules.
2. Create a custom scroll-to-top component.
3. Use this component in your application to trigger scrolling when the route changes.

Step 1: Import the necessary modules

First, import the required modules for React Router and React itself.

1
2

import React, { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

Step 2: Create a custom scroll-to-top component

Next, create a custom component called ScrollToTop. This component will listen for route changes using the useLocation hook and scroll to the top of the page when the route changes.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    // Scroll to the top of the page with instant behavior
    window.scrollTo({ top: 0, left: 0, behavior: 'instant' });
  }, [pathname]);

  return null;
}

In this component:

• We use the useLocation hook from React Router to get the current location (i.e., the current route’s pathname).
• We use the useEffect hook to watch for changes in the pathname variable.
• When the pathname changes (i.e., when the route changes), we use window.scrollTo() to scroll to the top of the page instantly.

Step 3: Use the ScrollToTop component

Now that you have the ScrollToTop component, you need to include it in your application. Place it at the top level of your routing configuration to ensure it works for all routes.

Here’s an example of how to use it with React Router:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Router>
      {/* Include the ScrollToTop component */}
      <ScrollToTop />

      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
        {/* Add more routes as needed */}
      </Switch>
    </Router>
  );
}

export default App;

By including the ScrollToTop component at the top level of your routes, it will automatically scroll to the top of the page whenever the route changes.

Conclusion

In this article, you’ve learned how to implement smooth scrolling to the top of the page instantly after a router transition in a React application. This enhances the user experience and ensures that users start reading new content from the top of the page when navigating between routes.