<ScrollRestoration>

This component will emulate the browser’s scroll restoration on location changes after loaders have completed. This ensures the scroll position is restored to the right spot, at the right time, even across domains.

You should only render one of these, right before the <Scripts/> component.

  1. import {
  2.   ScrollRestoration,
  3.   Scripts,
  4. } from "@remix-run/react";
  6. export default function Root() {
  7.   return (
  8.     <html>
  9.       <body>
  10.         {/* ... */}
  11.         <ScrollRestoration />
  12.         <Scripts />
  13.       </body>
  14.     </html>
  15.   );
  16. }

React Router <ScrollRestoration/>

This is a wrapper around React Router . Because Remix server renders your app’s HTML, it can restore scroll positions before JavaScript even loads, avoiding the janky “scroll jump” typically found in SPAs. Other than that, it is identical to the React Router version.

For advanced usage, see the React Router ScrollRestoration docs.