+
+ Restore scroll position of elements on page navigation
+
+
+ The `
` isn't the only thing that scrolls. When the user scrolls a list, then navigates back and forth, you may want to keep their scroll position where it was when they left. This library makes that easy.
+
+
+
+
+
+
+[![Build Status][build-badge]][build]
+[![MIT License][license-badge]][license]
+[![Code of Conduct][coc-badge]][coc]
+
+
+## The Problem
+
+When a user navigates to a new page, the browser will scroll the page to the
+position it was at when the user left the page. This is a great feature, but
+it's not perfect. The browser only scrolls the `` element. If the user
+scrolls a list, then navigates back and forth, the browser will scroll the page
+to the top, but the list will still be scrolled to the position it was at when
+the user left the page.
+
+## The Solution
+
+This library provides a way to restore the scroll position of any element on the
+page you choose. It does this by storing the scroll position of the element in
+session storage and then restoring it when the user navigates back to the page
+(very similar to how Remix handles scroll restoration for the ``).
+
+This depends on Remix's `useBeforeUnload`, `useNavigation`, and `useLocation`
+hooks. There's probably an easy way we could make this support React Router in
+general. PRs welcome!
+
+## Usage
+
+```tsx
+import { ElementScrollRestoration } from '@epic-web/restore-scroll'
+
+// ... Stick this in your root component somewhere:
+return (
+
+
+ {/* ... */}
+
+ {/* ... */}
+
+
+)
+```
+
+Then, for any element for which you wish to restore scroll position, simply add
+the `data-restore-scroll="true"` attribute:
+
+```tsx
+
+
+