javascript 客户端返回时保持大 HTML 页面的滚动位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16388772/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Maintain Scroll Position of large HTML page when client returns
提问by Ray S.
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.
当客户返回时，由于 html 页面很长，试图找到停止的确切位置太麻烦了。
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.
是否有一种简单的方法可以自动保持滚动位置，以便下次客户端返回页面时，页面会自动向下滚动到他离开的位置。这需要是透明的，即没有点击“存储”滚动位置。
回答by Mohamed-Ted
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.pageYOffsetStore 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...
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);
检索当前滚动位置，可以使用：
window.pageYOffset存储位置，这有两部分，时间和地点：
您可以选择在窗口关闭时或每次用户滚动时存储数据，或在设定的时间间隔内存储数据...
对于“where”，根据您的应用程序，您可能希望将其存储在 cookie、本地存储、服务器端（如果用户需要登录才能阅读电子书）...
通过检索存储的数据来恢复用户返回时的位置，并使用滚动到该位置
window.scrollTo(0, position);
so the real problem here is, when and where to store the position, and that depends on your application.
所以这里真正的问题是，何时何地存储位置，这取决于您的应用程序。
回答by Evalds Urtans
I made small jquery plugin that you can include and have this functionallity without cookies etc. Include just before end of body tag.
我制作了小型 jquery 插件，您可以将其包含在内，并在没有 cookie 等的情况下具有此功能。在body 标记结束之前包含。
<script type="text/javascript" src="/js/maintainscroll.jquery.min.js"></script>
</body>
回答by Evalds Urtans
You could always use the onbeforeunload event to check when the window is being closed, and set a cookie with the current position. Than every time the page is loaded just check if that cookie is set. If it is - use the value to redirect the user to the saved position.
您始终可以使用 onbeforeunload 事件来检查窗口何时关闭，并使用当前位置设置 cookie。比每次加载页面时检查是否设置了该 cookie。如果是 - 使用该值将用户重定向到保存的位置。
Update
更新
You should understand the concepts in order to make it work. You can read about cookies and how to interact with them in javascript here. The link contains a live example.
您应该了解这些概念才能使其发挥作用。您可以在此处阅读有关 cookie 以及如何在 javascript 中与它们交互的信息。该链接包含一个活生生的例子。
The onunload and onbeforeunload are javascript events which you can use to detect when your page is being closed. You should google what they are and how to use them.
onunload 和 onbeforeunload 是 javascript 事件，您可以使用它们来检测页面何时关闭。你应该用谷歌搜索它们是什么以及如何使用它们。
You could check this stack-overflow questionfor an answer how to jump to a specific offset and this oneto see how to retrive it.
您可以检查这个堆栈溢出问题的答案如何跳转到指定的偏移和这一个，看看如何以检索它。
I gave you all the puzzle pieces, it's up to you to put them together.
我给了你所有的拼图，由你来拼凑。
