Scrolling happens when user returns to a page with hash using browser back button

[monae]

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

1. git clone git@github.com:monae/nextjs-scrolltohash-bug.git and npm run dev.
2. Click on 'Open the test page without hash'. You are on top of the page.
3. Scroll down and click on 'Open another page'.
4. Click on browser back button, then you return to the preserved scroll position (Chrome, Safari) or top of the page (Firefox).
5. Back to the first page and click on 'Open the test page with hash'. You are on the anchor element.
6. Scroll down and click on 'Open another page'.
7. 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

[ricardoerl]

Is this still valid? I'd like to help review it to add more details and try a fix.

[monae]

It still happens on Next.js of latest version (9.5.1). My current environments are:

• OS: macOS (10.15.6)
• Browser: Chrome (84.0.4147.105), Safari (13.1.2), Firefox (79.0)
• Version of Next.js: 9.5.1
• Version of Node.js: 14.7.0

[tim-crisp]

I am experiencing the same issue.

• OS: Windows 10
• Browser: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36 Edg/85.0.564.41
• Version of Next.js: 9.5.2
• Version of Node.js: v12.18.3

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 scrollToHash call in componentDidUpdate (https://github.com/vercel/next.js/blob/v9.4.4/packages/next/client/index.js#L135-L137) if the component update was triggered as a result of the user navigating back in the browser.

[tim-crisp]

I have found a potential fix for this, will raise a PR at some point within the next few days.

[oliviertassinari]

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:

1. Load this URL https://nextjs.org/docs/getting-started#setup
2. Scroll a bit
3. Reload
4. the browser keep the previous scroll position
5. scrollToHash resets the scroll to the hash (why?)
6. on the load event, the browser restore the previous position of the scroll

=> Scroll flash 📸💥

Enregistrement.de.l.ecran.2021-01-14.a.21.03.56.mp4

It doesn't yield a great UX.

[sgtpenguin]

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.

  useEffect(() => {
    if (window.location.hash) {
      router.push(router.pathname);
    }
  }, []);

[jankaifer]

This issue is still valid with next@13.

1. Load this URL nextjs.org/docs/getting-started#setup
2. Scroll a bit
3. Reload
4. the browser keep the previous scroll position
5. scrollToHash resets the scroll to the hash (why?)
6. on the load event, the browser restore the previous position of the scroll

But with this url: https://nextjs.org/docs/getting-started#manual-setup

[abumostafa]

I can reproduce this on Nextjs docs, go to any url with hash, then click browser back button

url.with.hash.mov

[nidhipawar5]

I found a potential fix for this and here's the PR