JS实现刷新网页后之前浏览位置保持不变的功能，主要需要利用HTML5中的History API和Session Storage来实现。
具体过程步骤如下：
1.获取网页当前滚动位置，可以使用JavaScript代码document.documentElement.scrollTop或者document.body.scrollTop来获取当前滚动位置。
let currentScrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
2.将获取到的滚动位置保存到Session Storage中，可以使用JavaScript代码sessionStorage.setItem()将滚动位置保存到Session Storage中，需要注意Key的唯一性。
sessionStorage.setItem('scrollPosition', currentScrollPosition);
3.监听浏览器的popstate事件，这个事件在浏览器的前进后退按钮被点击时触发，需要使用addEventListener方法绑定事件处理函数。
window.addEventListener('popstate', function(event){
//这里将会还原滚动到的位置
});
4.在popstate事件处理函数中，可以获取到之前保存在Session Storage中的滚动位置，并使用window.scrollTo()方法将滚动位置还原回来。
window.addEventListener( 'popstate', function( event ) {
let scrollPosition = sessionStorage.getItem('scrollPosition');
window.scrollTo(0, scrollPosition);
});
示例一：
在实现了以上的步骤后，如果需要在网站进行一些页面跳转时，可以使用如下的代码保存滚动位置和pushState记录访问历史：
document.querySelectorAll('a').forEach(a=>{
a.addEventListener('click',function(event){
let currentScrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
sessionStorage.setItem('scrollPosition', currentScrollPosition);
history.pushState(null, null, a.href);
event.preventDefault();
})
})
示例二：
如果需要在滚动页面时自动记录滚动位置，如果实现了以上的步骤，可以使用如下的代码，来自动将每次滚动的位置保存到SessionStorage中：
document.addEventListener('scroll', function() {
let currentScrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
sessionStorage.setItem('scrollPosition', currentScrollPosition);
})
本文链接：http://task.lmcjl.com/news/11891.html