Skip to content

Fix scroll restore when using browser back after hash links - #8573

Open
moltresIn wants to merge 1 commit into
reactjs:mainfrom
moltresIn:fix/787-hash-back-scroll
Open

Fix scroll restore when using browser back after hash links#8573
moltresIn wants to merge 1 commit into
reactjs:mainfrom
moltresIn:fix/787-hash-back-scroll

Conversation

@moltresIn

@moltresIn moltresIn commented Aug 3, 2026

Copy link
Copy Markdown

Summary

  • Fixes The browser "back" button doesn't work #787: after clicking an in-page # fragment link, browser Back updates the URL but does not restore scroll when history.scrollRestoration is manual (Chrome/Firefox).
  • Saves scrollY on the current history entry via replaceState before hash navigation, then restores it on popstate when the hash is cleared.
  • Leaves Safari’s existing scrollRestoration = 'auto' path unchanged.

Test plan

  • yarn check-all
  • Local repro on /learn/describing-the-ui: scroll mid-page → click heading anchor → Back → scroll returns to prior position
  • Reviewer: try Chrome/Firefox on the Vercel preview with the same steps
  • Reviewer: confirm normal sidebar page navigations still scroll as before
  • Reviewer: quick Safari check that back-swipe / auto restoration still feels fine

With Next.js scrollRestoration set to manual, going back from an
in-page fragment left the URL correct but kept the hash scroll
position. Save scrollY on the history entry before hash navigation
and restore it on popstate. Fixes reactjs#787.
@github-actions

github-actions Bot commented Aug 3, 2026

Copy link
Copy Markdown

Size changes

Details

📦 Next.js Bundle Analysis for react-dev

This analysis was generated by the Next.js Bundle Analysis action. 🤖

⚠️ Global Bundle Size Increased

Page Size (compressed)
global 115.46 KB (🟡 +319 B)
Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

The browser "back" button doesn't work

1 participant