Scroll position is not preserved when using back and forward buttons

[lttr]

I expect to land on the same scroll position as I was before on a page A, when I use a back button on page B.

I end up on the top of the page A or even at a different position, instead of on the scroll position I was before.

Reproduction

1. visit https://vuejs.org/guide/introduction.html
2. scroll to the bottom of the page, I can now see a heading "Pick Your Learning Path"
3. click on "Quick Start" in the left navigation menu, I am now on page https://vuejs.org/guide/quick-start.html
4. scroll to the bottom of the page, I can now see a heading "Next Steps"
5. hit Back button in the browser
6. I can see the heading "Pick Your Learning Path" on page "Introduction"
7. hit Forward button in the browser
8. I am on page "Quick Start". I can no longer see the heading "Next Steps". I can see "Using Vue from CDN" at the top of my viewport.
9. quickly hit back, forward, back, forward in the browser
10. I am on page "Quick Start". I can no longer see any of the headings mentioned above, because I am on the top of the page suddenly.

Expected behavior

Ideally the scroll position would be preserved at the exact same position, as it is done on plain HTML by browsers.

The issue is not present when I disable JavaScript in DevTools.

Environment

Browser: Firefox 112
OS: Pop_OS (Ubuntu) 22.04

[mahmudunnabikajal]

@lttr I checked your issue in multiple browsers and the final feedback is given below.

Feedback

• The URL hash(#) will automatically change if you cross the heading 50%(approximately) of your device view-height. when you see the heading "Next Steps" it doesn't cross 50% view-height so the URL hash remains in "#using-vue-from-cdn". After go forward & go back browser shows you the "Using Vue from CDN" headling because the last hash history is "#using-vue-from-cdn".
• After go forward & go back multiple times firefox browser shows you the top of the page. Because firefox remove your last hash history. This "scroll-linked positioning effect not work well in firefox" and show a warning in the console [reference¹]. You don't see this issue in chrome/other browser.

Reference

1. Console warning & details link: https://firefox-source-docs.mozilla.org/performance/scroll-linked_effects.html
   

[lttr]

Thank you for the investigation. My main point is that it is unfortunate, that the behavior is worse than if it the website would be static HTML site. There might be issues with Firefox, but as far as I understand your answer it looks like the issue will be the same for any content on a page which has no headings. Binding scroll position to hash part of the URL is nice for linking to specific parts of an article but it is definitely not saving the scroll position, which might be different.

A typical scenario is when you click a link, chect the other page or website and then after a couple of moments you hit back button to continue reading the original page. At least for me it is very confusing to not have the original page in the exact same position.