在开发的过程中我们经常需要重新加载或者刷新某个画面,已确保数据显示是最新的。但是如果一丁点改变就刷新画面的话,会导致用户体验很差,想想看你好不容易把网页拖到最后,结果点击某个按钮的时候,又跑到顶端;或者网页内容很多,你在网页的某个区域进行操作,操作完毕后却回到顶端,再次操作的时候还得找到那个区域。
有两种方法可以解决这个问题:ajax部分刷新或者刷新后滚动条位置不变。这里我们先不说ajax的方法,因为在开发过程中可能受需求的限制,你并不需要用ajax的方法。那么如何才能实现网页刷新或者重新加载后滚动条的位置不变那?
我们可以在没有刷新之前存储当前滚动条的位置,然后在网站加载的时候读取存储的滚动条位置。这里需要用到window.onbeforeunload()、window.onload()两个方法,具体代码和实现方式如下:
function window.onbeforeunload(){
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中
}
function window.onload()
{
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]);
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)