有时我们有这么一个需求：这个页面非常长，但是当我阅读了一半的时候可能点击了页面中的某一个链接跳转到了一个新的页面查看部分资料，然后再回来。这时我们希望能够从离开的位置继续阅读。下面就让我们来实现一下。
首先，我们需要在页面离开前记录当前页面滚动条的位置：
//记录当前滚动条的位置
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;然后我们将他储存在本地
//储存在本地
localStorage.setItem("scrollTop", scrollTop);随后我们跳转到新的页面
//跳转到指定页面
window.location.href = "http://www.baidu.com";当我们回到原页面的时候，需要加载这个位置，这时候需要在页面的onload周期执行一个函数，来实现这个功能。
function loadPostion() {
//加载本地数据
var nowLocaton = localStorage.getItem("scrollTop");
//设置滚动条的位置
window.scrollTo(0, nowLocaton);
}这样我们就实现了离开当前页面位置不丢失的功能。
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body onload="loadPostion()">
<div style="height:3000px ;">
</div>
<button class="buttons" onclick="routePage()">离开</button>
<script>
function loadPostion() {
//加载本地数据
var nowLocaton = localStorage.getItem("scrollTop");
//设置滚动条的位置
window.scrollTo(0, nowLocaton);
}
function routePage() {
//记录当前滚动条的位置
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//储存在本地
localStorage.setItem("scrollTop", scrollTop);
//跳转到指定页面
window.location.href = "http://www.baidu.com";
}
</script>
</body>
<style>
.buttons {
position: fixed;
top: 50%;
left: 0
}
</style>
</html>如果想要实时记录，还可以通过定时器的方式，在一个很小的时间间隔记录并储存当前的页面位置
//实时获取滚动条的位置
window.onscroll = function() {
setInterval(function() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
localStorage.setItem("scrollTop", scrollTop);
}, 100);
};