我正在提供很长的html页面(简短的电子书)
当客户返回时,由于长html页面而试图找到离开的确切位置太麻烦了。
是否有一种简单的方法可以自动维护滚动位置,以便下次客户端返回页面时,页面会自动向下滚动到停止的位置。 这需要透明,即不要点击“存储”滚动位置。
答案 0 :(得分:18)
步骤很简单,但此问题的解决方案取决于您的应用实施,您可以:
检索当前滚动位置,您可以使用:
window.pageYOffset
存放位置,这有两个部分,时间和地点:
您可以选择存储数据,窗口关闭时,或每次用户滚动时,或按设定的间隔...
对于“where”,根据您的应用程序,您可能希望将其存储在服务器端的cookie,本地存储中(如果用户需要登录才能阅读电子书) ...
通过检索存储的数据,在用户返回时恢复位置,并使用
滚动到该位置 window.scrollTo(0, position);
因此,真正的问题是,何时何地存储该职位,这取决于您的申请。
答案 1 :(得分:8)
您始终可以使用onbeforeunload事件来检查窗口何时关闭,并使用当前位置设置cookie。每次加载页面时,只需检查是否设置了该cookie。如果是 - 使用该值将用户重定向到保存的位置。
<强>更新强>
您应该了解这些概念,以使其发挥作用。您可以在javascript here中阅读有关Cookie以及如何与Cookie进行互动的信息。该链接包含一个实例。
onunload和onbeforeunload是javascript事件,您可以使用它来检测页面何时关闭。你应该谷歌他们是什么以及如何使用它们。
您可以查看this stack-overflow question以获取有关如何跳转到特定偏移量的答案,并this one查看如何进行回溯。
我给了你所有的拼图,你可以把它们组合在一起。
答案 2 :(得分:8)
我制作了一个小jquery插件,你可以包含并且没有cookie等功能。包括在身体标签结束之前。
<script type="text/javascript" src="/js/maintainscroll.jquery.min.js"></script>
</body>