首页 > 其他 > 详细

页面刷新后保持滚动条的位置

时间:2020-11-26 13:39:30      阅读:21      评论:0      收藏:0      [点我收藏+]
注意:如果页面数据是ajax获取展开的,必须要等数据全部加载,dom渲染完成后才能保持滚动条的位置。例如可以setTimeout方式设置(等页面全部渲染后执行设置scroolTop)

1.设置滚动条位置到cookie
//在即将离开当前页面(刷新或关闭)时执行
window.onbeforeunload = function () {
var scrollPos;
if (typeof window.pageYOffset != ‘undefined‘) {
scrollPos = window.pageYOffset;
}
else if (typeof document.compatMode != ‘undefined‘ &&
document.compatMode != ‘BackCompat‘) {
scrollPos = document.documentElement.scrollTop;
}
else if (typeof document.body != ‘undefined‘) {
scrollPos = document.body.scrollTop;
}
document.cookie = "scrollTop=" + scrollPos; //存储滚动条位置到cookies中
}
2.页面加载后读取cookie里滚动条的值
if (document.cookie.match(/scrollTop=([^;]+)(;|$)/) != null) {
    var arr = document.cookie.match(/scrollTop=([^;]+)(;|$)/); //cookies中不为空,则读取滚动条位置
document.documentElement.scrollTop = parseInt(arr[1]);
document.body.scrollTop = parseInt(arr[1]);
}

 

页面刷新后保持滚动条的位置

原文:https://www.cnblogs.com/mark8080/p/14041245.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!