Scrolling happens when user returns to a page with hash using browser back button
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 142k
- Forks
- 32.4k
- Avg merge
- 2d 14h
- Merged PRs (30d)
- 351
Description
Bug report
Describe the bug
When user returns to a page which have url with hash (e.g. http://localhost:3000/test#anchor) from another page, unexpected scrolling to the anchor element happen.
It seems componentDidUpdate of Container triggers scrollToHash even when one returns by clicking browser back button.
(https://github.com/vercel/next.js/blob/v9.4.4/packages/next/client/index.js#L135-L137)
To Reproduce
Example repo: https://github.com/monae/nextjs-scrolltohash-bug
git clone git@github.com:monae/nextjs-scrolltohash-bug.gitandnpm run dev.- Click on 'Open the test page without hash'. You are on top of the page.
- Scroll down and click on 'Open another page'.
- Click on browser back button, then you return to the preserved scroll position (Chrome, Safari) or top of the page (Firefox).
- Back to the first page and click on 'Open the test page with hash'. You are on the anchor element.
- Scroll down and click on 'Open another page'.
- Click on browser back button, then you return to the anchor element.
Expected behavior
The results of 4. & 7. should be same (although the behavior of Firefox is not desirable).
Screenshots
System information
- OS: macOS
- Browser (if applies) Chrome, Safari, Firefox
- Version of Next.js: 9.4.4
- Version of Node.js: 14.3.0
Additional context
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the behavior with the linked monae/nextjs-scrolltohash-bug example, then inspect packages/next/client/index.js around lines 135-137, where Container componentDidUpdate triggers scrollToHash. Compare browser-back behavior for URLs with and without hashes across the listed browsers. Done means returning with a hash preserves the same scroll behavior as returning without one.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, nextjs
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100