客户返回时保持大型HTML页面的滚动位置

本文介绍了客户返回时保持大型HTML页面的滚动位置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在提供非常长的html页面（简短的电子书）

I'm serving very long html pages (short ebooks)

当客户回来时，试图找到因中断的确切位置太麻烦了长html页面。

When client returns, too much of a hassle to try to find exact place where left off due to long html page.

是否有一种简单的方法可以自动维护滚动位置，以便下次客户端返回页面时页面自动向下滚动到他离开的位置。 这需要透明，即不要点击存储滚动位置。

Is there a simple way to maintain the scroll position automatically so that next time the client returns to the page the page scrolls down automatically to where he left off. this needs to be transparent, i.e. no clicking to "store" scroll position.

推荐答案

步骤很简单，但这个问题的解决方案取决于你的app实现，你可以：

The steps are simple, but the solution to this question depends on your app implementation, you can:

• 检索当前滚动位置，你可以使用：

• Retrieve the current scroll position, you can use:

window.pageYOffset

商店该位置有两个部分，时间和地点：

Store the position, this has two parts, when and where:

• 当窗口关闭时，您可以选择存储数据，或者每次用户滚动或按设定的间隔...

• You can chose to store the data, when the window closes, or every time the user scroll, or on a set interval...

where，具体取决于您的应用，您可能希望存储它，在cookie中，本地存储，在服务器端（如果用户需要登录以阅读电子书）...

for the "where", depending on your app, you may want to store it, in a cookie, local-storage, on the server-side (if the user needs to log in to read the eBook)...

通过检索存储的数据，在用户返回时恢复位置，并使用

Restore the position when the user return, by retrieving the stored data, and scroll to that position using

window.scrollTo（0，position）;

所以真正的问题是，存储位置的时间和地点，这取决于你的应用程序。

so the real problem here is, when and where to store the position, and that depends on your application.