加载了动态Javascript内容后跳转到最后一个滚动位置

Question

I have a very long (y axis) page with a lot of stuff on it that is dynamically added via JavaScript. When the page loads its height is almost 200px and when it has finished JavaScript initialization its height could be up to 20 times the screen height.

In the normal usages the user may reload the page using the browsers reload button or shortcut. After reload the page is not yet at full height when the browser tries to jump to the last scroll position and thus lands at the start position instead. Only the client side Javascript is aware of the content height and scroll position.

I want it to scroll to the last scroll position when my JavaScript took care of loading the content without having to store the users last scroll position or content height anywhere (eg local storage, cookie, URL, on the server, etc.).

Is that somehow possible?

Answer 1

When the user clicks off the page, store the value of window.pageYOffset in local storage. Then, once they return to the page, load the value if it exists, then once all elements have been initialized, use window.scrollTo(0, pageYOffset) .

It's not possible to get around storing this information somehow, as it is not a part of the page or the browser. Storing information in local storage allows your JavaScript to retain information about the user, specifically in this case where they had scrolled to on the page.