Back to a list should restore where the user had scrolled

What it is

After opening an item from a list and coming back, people expect the viewport to still sit in the band they left, not on item one. Scroll restoration here is the basic courtesy of a round-trip: the list is still that list, order is not the issue, the only demand is “do not make me scan from the top again.” Browsers already try this for ordinary multi-page documents. An SPA that mounts the list as a new page drops the default.

This leaf only asks that return not reset to the top. How to align when new items were inserted while away, and how much of an infinite list must be loaded before the place exists, are harder restoration problems, not handled here.

Why it happens

People bookmark a list with spatial memory: they stopped “about two-thirds down, near that blue card.” Return from the top voids the bookmark and forces a replay of scanning already paid for. The cost grows with distance scrolled before leaving; short lists hide it, more than one screen starts anger. The History API’s scrollRestoration stores the offset on the session history and can still match after a full reload. SPA routing swaps DOM without swapping the document, so the browser believes nothing was scrolled and the offset is 0. If the list component unmounts on entering a detail, the first frame on return has the initial height; even a later scrollTop is seen after the user has already seen the top.

Basic restoration is therefore two steps: remember the offset (or a pixel neighbourhood of an anchor) at leave, and land there on the first frame back, rather than painting the top and then jumping. It assumes the list’s content and order are still roughly those left behind—that is what “basic” means.

Studying it

An enter–exit task: open an item from a list scrolled at least one screen, return, and measure whether the viewport still covers the region left behind.

• Independent variables: implementation (browser default scrollRestoration / SPA unmount-and-remount / manual scrollTo), list length.
• Dependent variables: pixel delta from the pre-leave viewport, whether the top appears first, distance re-scrolled downward, verbal reports of being “thrown back.”
• Methodological note: short lists yield “doesn’t matter if we reset.” Leave only after more than one screen. Do not insert items during the absence—that conflates basic restoration with “how to align when content changed,” which must be measured separately.

Where it stops holding

A list that never exceeds one screen cannot distinguish reset from restore; there is no observable difference. An explicit “back to top of list” on the detail is a voluntary abandonment of the current place. If filters or sort were changed by the system while away, the list is no longer the one left; restoring pixels lands in meaningless empty space. Admit that the list changed rather than clinging to the offset. Search results re-queried into a very different count likewise no longer have “that band I was in.”

Applying it

• Bind the current scroll offset to session history when leaving the list; restore it on the first frame of return. Do not render the top and then scrollTo.
• Keep-alive the list on the SPA stack, or cache the scroll value; do not enter the list route at scrollTop = 0 every time.
• For multi-page documents leave history.scrollRestoration = 'auto'. Do not turn it off globally and then forget to replace it.
• Verify: on desktop and phone, take an ordinary paged or finite list longer than two screens, open a detail, go Back. If the recording shows the top for more than one frame, or the person starts hunting downward for the item they had, it failed. Do not accept this leaf against a feed that inserts items while the user is away.

Related

• Within the group: G4.03.2 Filters and sort must survive a round-trip · G4.03.3 Persisted state expires, and expiry must be explained
• Adjacent: G4.01 Back stack and back semantics · G4.07 State persistence and position restoration · E5.07 Infinite scroll
• Search terms: scroll restoration · history.scrollRestoration · return to list