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

    禁用浏览器的缓存位置

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

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

    1. if(history.scrollRestoration)
    2.     history.scrollRestoration = 'manual'; //不启用缓存位置,手动控制位置
    3. else {
    4.     window.onpagehide = function() { //页面关闭,恢复顶部
    5.         $(window).scrollTop(0);
    6.     }
    7. }
    8. $(function() {
    9.     if(history.scrollRestoration == 'manual') {
    10.         $(window).scrollTop($('.red').position().top)
    11.     } else {
    12.         setTimeout(function() {//定时,延后设置
    13.             $(window).scrollTop($('.red').position().top)
    14.         }, 500);
    15.     }
    16. })

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

    回到顶部
    我要评论

    所有评论

      相关文章