现在的浏览器都有一个缓存位置的功能,比如一个页面很长,然后你浏览到了比较下面,当你不小心刷新页面,页面会自动滚到刚才你浏览的位置上,这个功能在大部分场合比较好,但是有些时候就会比较麻烦,例如每次刷新页面的时候你想滚到某一个特定的位置。

禁用浏览器的缓存位置

上面就是一个每次让浏览器滚动到特定位置的demo,这个最好的是可以通过设置history.scrollRestoration = 'manual'来完成,history.scrollRestoration一般为auto,表示浏览器会默认记录位置,如果设置了manual,那么浏览器就不会记录你的位置。但是这个属性只是在高版本的chrome,ff上支持,因此除了这个办法还得想其他兼容办法。

首先我们用在页面即将关闭的时候scrollTop(0),然后通过延时去设置scrollTop,因为浏览器设置滚动也不是马上出触发,我们设置一个比较大的延时,可以将浏览器滚动位置抹去,关键代码如下:

if(history.scrollRestoration)
    history.scrollRestoration = 'manual'; //不启用缓存位置,手动控制位置
else {
    window.onpagehide = function() { //页面关闭,恢复顶部
        $(window).scrollTop(0);
    }
}
$(function() {
    if(history.scrollRestoration == 'manual') {
        $(window).scrollTop($('.red').position().top)
    } else {
        setTimeout(function() {//定时,延后设置
            $(window).scrollTop($('.red').position().top)
        }, 500);
    }
})

不过history.scrollRestoration有一个问题,就是如果你一旦设置了history.scrollRestoration = 'manual',只能手动设置为auto,否则就算你屏蔽了也一直是'manual'。(同一个页面)

回到顶部
我要评论

所有评论

返回
邮箱:
绑定
取消
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

邮箱:
绑定邮箱后,若有回复,会邮件通知。
提交
还可以输入500个字