JS实现刷新网页后之前浏览位置保持不变示例详解

JS实现刷新网页后之前浏览位置保持不变的功能，主要需要利用HTML5中的History API和Session Storage来实现。

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);
})