← Lessons

quiz vs the machine

Gold1340

Frontend

Scroll Restoration

Restore prior scroll position on back navigation and reset it on new pages.

4 min read · core · beat Gold to climb

The problem

In a single page app the document never reloads, so the browser cannot automatically restore scroll. Without help, going back keeps you at the top instead of where you left off.

The rules

  • On a new forward navigation, scroll to the top.
  • On back or forward through history, restore the saved position.
  • For in page anchors, scroll to the target element.

How it works

The router records the scroll offset for each history entry as you leave it. On a POP navigation it looks up the saved offset and reapplies it after the new content has rendered.

Timing matters

You must restore after layout, once the page is tall enough, or the offset clamps to a shorter page. Lazy loaded content can shift the position, so restoration may need to wait for data.

Why it matters

Correct scroll restoration makes back navigation feel native and prevents the jarring jump to top that frustrates users browsing long lists.

Key idea

Save scroll per history entry and restore on back or forward, but reset to top on new navigations, applying offsets after layout.

Check yourself

Answer to earn rating on the learn ladder.

1. On a fresh forward navigation, scroll should

2. Why must restoration happen after layout?