React Scroll to Top on Route Change Made Simple

Tired of scrolling back up after navigating through a site?

A react scroll to top on route change feature can fix that! It makes the user experience smoother by automatically scrolling to the top when the route changes.

This blog will walk you through how to add this feature in React using React Router. We'll keep it simple and cover some best practices along the way.

Let’s get started!

Understanding the Need for Scroll to Top on Route Change

When users navigate between pages in a React application, especially single-page applications (SPAs), the scroll position often remains unchanged. This behavior can be disorienting, particularly when the new page's content doesn't align with the previous scroll position. Implementing a scroll-to-top feature addresses this issue by resetting the scroll position to the top of the page upon route transitions, providing a consistent and intuitive navigation experience.

Prerequisites

Before proceeding, ensure you have the following:

• React: A JavaScript library for building user interfaces.

• React Router: A standard library for routing in React applications.

How to Implement Scroll to Top with React Router?

React Router provides hooks and components that facilitate navigation and routing in React applications. To implement the scroll-to-top functionality, follow these steps:

1. Create a ScrollToTop Component: This component will monitor route changes and adjust the scroll position accordingly.

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

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

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
};

export default ScrollToTop;

In this component:

• useLocation hook from React Router provides access to the current location object, which includes the pathname.

• useEffect hook listens for changes in the pathname. Upon detection, it triggers window.scrollTo(0, 0), resetting the scroll position to the top.

This approach ensures that every time the route changes, the page scrolls to the top, enhancing the user experience.

2. Integrate ScrollToTop into Your Application: Incorporate the ScrollToTop component into your application's component tree, typically at a high level to encompass all routes.

Copy
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import ScrollToTop from './ScrollToTop';
import HomePage from './HomePage';
import AboutPage from './AboutPage';

function App() {
  return (
    <Router>
      <ScrollToTop />
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
        {/* Add more routes as needed */}
      </Routes>
    </Router>
  );
}

export default App;

Here, the ScrollToTop component is placed inside the Router but outside the Routes. This positioning ensures that it can detect route changes and adjust the scroll position appropriately across all defined routes.

Enhancing User Experience with Smooth Scrolling

To further improve the navigation experience, consider adding smooth scrolling behavior. This effect provides a gradual transition to the top of the page, making the navigation feel more natural.

1. Enable Smooth Scrolling via CSS: Add the following CSS rule to your global styles:

This rule applies smooth scrolling to all anchor links and programmatic scrolls within the application.

2. Implement Smooth Scrolling in JavaScript: If you prefer or require JavaScript-based scrolling, modify the useEffect in the ScrollToTop component as follows:

By setting the behavior property to 'smooth', the scroll action becomes animated, enhancing the user experience.

Handling Scroll Restoration in React Router v6

React Router v6 introduced changes in how scroll restoration is handled. To implement scroll-to-top functionality in v6, you can utilize the useLayoutEffect hook for immediate effect before the paint:

Using useLayoutEffect ensures that the scroll position is reset before the browser repaints, preventing any visual inconsistencies during navigation.

Advanced Considerations

For applications with complex routing or nested routes, you might need to implement scroll restoration that considers the scroll position of individual elements or sections. This requires a more nuanced approach, such as:

• Saving Scroll Position: Before a route change, store the current scroll position of relevant elements.

• Restoring Scroll Position: After the route change and component re-render, programmatically set the scroll position of elements to their saved positions.

This approach can be particularly useful for applications with tabbed interfaces or dynamically loaded content.

Wrapping Up!

Adding a scroll-to-top feature on route changes in React makes navigation smoother and more user-friendly. Using React Router's hooks like useLocation and React’s useEffect or useLayoutEffect helps developers manage scroll behavior easily. By applying these methods, a React app can deliver a more intuitive and polished user experience.

html {
  scroll-behavior: smooth;
}

useEffect(() => {
  window.scrollTo({
    top: 0,
    left: 0,
    behavior: 'smooth',
  });
}, [pathname]);

import { useLayoutEffect } from 'react';
import { useLocation } from 'react-router-dom';

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

  useLayoutEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
};

export default ScrollToTop;