使用sessionStorage实现,在返回到之前浏览的页面时,直接将页面展示到用户刚刚浏览的位置,而不是重新刷新页面到了页面顶部。
代码:
//page01.html
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
// 页面加载时, 从sessionStorage中拿出之前保存的距离顶部的距离,并定位到位置
window.onload = function() {
var _offset = sessionStorage.getItem("toTop");
$(document).scrollTop(_offset);
};
// 在跳转至其他页面时,保存该页面距离顶部距离到sessionStorage
$(".btn").click(function() {
if($(document).scrollTop() != 0) {
sessionStorage.setItem("toTop", $(window).scrollTop());
}
});
</script>
<body>
<p>这是一行的信息</p>
<p>这是一行的信息</p>
...
<p>这是一行的信息</p>
<p>这是一行的信息</p>
<a href="page02.html" class="btn">跳转页面</a>
</body>
//page02.html
<body>
<h1>这是页面2</h1>
<a href="index.html">回到页面1</a>
</body>
代码解释:
用户点击”跳转页面按钮“,拿到滚动位置,存入sessionStorage中。
在页面onload时,拿到存在sessionStorage中的滚动位置数据,滚动到相应的位置。
其他: