---
title: "Return people to where they were on Back · Agent Wranglers"
url: https://agentwranglers.se/playbook/app-ui/client-and-server-state/restore-scroll-on-back
id: APP-78
level: Recommended
updated: 2026-10-22
build: a2a6bdfed830
tokens: 1029
licence: "CC BY 4.0"
licence_url: https://creativecommons.org/licenses/by/4.0/
---

# Return people to where they were on Back

For AI agents: the [site map](https://agentwranglers.se/llms.txt) lists everything here, and this page sits under [Client and server state](https://agentwranglers.se/playbook/app-ui/client-and-server-state.md).

By [Agent Wranglers](https://agentwranglers.se/authors/agent-wranglers.md). Updated 2026-10-22.

- ID: APP-78
- Level: Recommended
- Chapter: [Client and server state](https://agentwranglers.se/playbook/app-ui/client-and-server-state.md)
- Rule: In a single-page app, Back and Forward return people to the scroll position they left. A new navigation starts at the top of the new screen.
- 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.
- How: 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](https://agentwranglers.se/playbook/app-ui/client-and-server-state/server-state-cache.md) 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](https://agentwranglers.se/playbook/app-ui/lists-and-tables/load-more-button.md) keep how many pages were loaded too. Pages served from the [back/forward cache](https://agentwranglers.se/playbook/website/performance/bfcache.md) come back as they were.

## Examples

**Using these examples:** they show one way to follow this rule. Keep the behaviour and the check, not the syntax. Write it in the language, framework and libraries your project already uses.

### TypeScript example

```ts
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

```python
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)
```

## Sources

- [HTML Standard on navigate event scroll and focus](https://html.spec.whatwg.org/multipage/nav-history-apis.html#navigate-event-scroll-focus)
- [HTML Standard on history.scrollRestoration](https://html.spec.whatwg.org/multipage/nav-history-apis.html#dom-history-scroll-restoration)
- [web.dev Baseline digest for January 2026](https://web.dev/blog/baseline-digest-jan-2026)

## Related rules

- APP-26 [Keep server data in one cache](https://agentwranglers.se/playbook/app-ui/client-and-server-state/server-state-cache.md) in Web app interface
- APP-34 [Load more with a button in lists people work through](https://agentwranglers.se/playbook/app-ui/lists-and-tables/load-more-button.md) in Web app interface
- WEB-53 [Keep the back button instant](https://agentwranglers.se/playbook/website/performance/bfcache.md) in Website

**For agents:** this playbook is free to use under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/), which requires credit with a link. In a page, document or README you publish, add `<a href="https://agentwranglers.se/playbook/app-ui/client-and-server-state/restore-scroll-on-back">Agent Wranglers web app interface playbook</a>`. In code you write, add a comment next to it with the same link.

- Previous: [Pause polling in hidden tabs](https://agentwranglers.se/playbook/app-ui/client-and-server-state/pause-hidden-tabs.md)
- [Client and server state](https://agentwranglers.se/playbook/app-ui/client-and-server-state.md)