Scroll restoration

Pressing Back returns you to the exact part of the list or page you left, instead of dumping you at the top.

take me back to where I was in the listkeep my scroll positionback button jumped to topreturn to the same item after opening itremember where I was on the pagedon't lose my place when I go backback dumps me at the top of the feed againscroll restoriation

See it

Live demo coming soon

What it is

Scroll restoration returns a person to the viewport they left when they navigate back or forward. Open item 73 from a long results list, inspect it, press Back, and item 73 should still be there under your eyes. Browsers preserve this for free on document navigations; client-side routing and late-loading content hand the job back to you. React Router ships a ScrollRestoration component for exactly this reason, and history.scrollRestoration = 'manual' is the switch that tells the browser to stop guessing while you do it yourself.

Reach for it on search results, feeds, catalogs, documentation, and any list-to-detail path. Restore on history traversal, but start at the top for a genuinely new destination. For virtualized or changing lists, save the visible item's stable ID and its offset rather than trusting one pixel coordinate forever.

The gotcha is restoring before the page has its final height. Images, fonts, and fetched rows can load after scrollTo runs and leave the person somewhere else. Wait until the target content exists, restore without a smooth animation, and do not fight a deliberate anchor link or browser find result.

Ask AI for it

Implement scroll restoration for this client-side router with the History API. Set history.scrollRestoration to 'manual'; before leaving, store window.scrollY plus the nearest visible item's stable ID and offset in sessionStorage under a unique history-entry key. On a Back or Forward popstate, wait until the saved item exists and the list has enough height, then restore with window.scrollTo using behavior: 'instant'. On a new navigation, start at the top. Prefer the item ID and offset for virtualized or reordered lists, fall back to the pixel position for static pages, and leave hash targets and text-fragment URLs alone. Do not animate the restored jump or move keyboard focus just because scroll was restored.

You might have meant

infinite scroll vs paginationstate persistencefocus managementuser flow task flowvisibility of system status