保存用户返回前浏览的位置——滚动条的位置

sessionStorage

sessionStorage 的数据存储在当前页面的内存中,生命周期为关闭当前窗口

思路

  1. 当用户浏览页面时,监听页面滚动事件,获取滚动条的位置,存储在sessionStorage中;
  2. 当点击返回按钮时数据依然存在,关闭窗口后再进页面才会清空数据。
  3. 在进来页面一刷新,首先获取sessionStorage中存储的滚动条位置
  4. 设置滚动条的位置 $(document).scrollTop(滚动条位置);

代码

原生代码

<script>
        window.onload = function() {  
            var offset = sessionStorage.getItem("offsetTop");  //获取位置
            window.scrollTo(0, offset);     //设置位置
			
            window.onscroll = function() {       //监听页面滚动
                sessionStorage.setItem("offsetTop", document.documentElement.scrollTop);     //保存滚动位置
            };
        };
    </script>

jQuery代码

$(window).scroll(function(){
	if($(document).scrollTop()!=0){
    sessionStorage.setItem("offsetTop", $(window).scrollTop());//保存滚动位置
   } 
});

window.onload = function()
{
  var _offset = sessionStorage.getItem("offsetTop");
  $(document).scrollTop(offsetTop);
};

猜你喜欢

转载自blog.csdn.net/weixin_43848576/article/details/86535474
今日推荐