-
Notifications
You must be signed in to change notification settings - Fork 26.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Scrolling happens when user returns to a page with hash using browser back button #13653
Comments
Is this still valid? I'd like to help review it to add more details and try a fix. |
It still happens on Next.js of latest version (9.5.1). My current environments are:
|
I am experiencing the same issue.
If you turn JavaScript off and use hard navigation instead of relying on the Next.js JavaScript router, the scrolling position will be preserved and you will not be taken to the previous anchor point, you'll instead be taken to the scroll position at which you clicked the last link. I'm very new to the Next.js codebase, but it's almost as if you should skip the |
I have found a potential fix for this, will raise a PR at some point within the next few days. |
We have noticed the same issue in mui/material-ui#24418 (review). For instance, if you take the documentation of Next.js, you can observe it:
=> Scroll flash 📸💥 Enregistrement.de.l.ecran.2021-01-14.a.21.03.56.mp4It doesn't yield a great UX. |
This is still a problem. It would be great if it was fixed. My current workaround is to remove the hash from the page when the user gets there, which seems to let to scroll behavior work properly, because user will then go back to the un-hashed page, but is not a great solution.
|
This issue is still valid with
But with this url: https://nextjs.org/docs/getting-started#manual-setup |
I can reproduce this on Nextjs docs, go to any url with hash, then click browser back button url.with.hash.mov |
I found a potential fix for this and here's the PR |
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 triggersscrollToHash
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.git
andnpm run dev
.Expected behavior
The results of 4. & 7. should be same (although the behavior of Firefox is not desirable).
Screenshots
System information
Additional context
The text was updated successfully, but these errors were encountered: