Return people to where they were on Back

How to do it

A router that renders after the data loads restores the scroll position too early, so people land at the top of a long list. Keep the list's data in the cache, as keep server data in one cache says, so the old screen renders at once. With the Navigation API, call event.intercept() with scroll: 'manual', then call event.scroll() once the data is on screen. The Navigation API is Baseline since January 2026. With a history router, set history.scrollRestoration to manual and save the position for each history entry. Lists that grow with load more with a button keep how many pages were loaded too. Pages served from the back/forward cache come back as they were.

Examples

TypeScript example

navigation.addEventListener('navigate', event => {
  if (!event.canIntercept || event.hashChange || event.downloadRequest) return;
  event.intercept({
    scroll: 'manual',
    async handler() {
      await renderRoute(new URL(event.destination.url));
      event.scroll();
    },
  });
});

Python example

def test_back_returns_to_row(page):
    page.goto("https://app.example.com/orders")
    row = page.get_by_role("row").nth(120)
    row.scroll_into_view_if_needed()
    row.get_by_role("link").click()
    page.go_back()
    expect(page.get_by_role("row").nth(120)).to_be_in_viewport(timeout=1_000)

How to check

A browser test scrolls a list of 200 rows to row 120, opens a record and presses Back. Row 120 is in view within 1 second. Following a link to a new screen leaves the window at scroll position 0.

Sources

• HTML Standard on navigate event scroll and focus
• HTML Standard on history.scrollRestoration
• web.dev Baseline digest for January 2026

Related rules

• APP-26 Keep server data in one cache in Web app interface
• APP-34 Load more with a button in lists people work through in Web app interface
• WEB-53 Keep the back button instant in Website