防止刷新时自动浏览器滚动

时间:2011-08-12 03:35:40

标签: javascript browser

如果您转到页面a并滚动然后刷新页面将在您离开的位置刷新。这很好,但是这也发生在网址中有锚位置的网页上。例如,如果您点击链接http://example.com/post/244#comment5并在环顾四周后刷新页面,则不会出现在主页上并且页面会跳转。有没有办法用javascript来防止这种情况?所以无关紧要 - 你总是会导航到锚点。

9 个答案:

答案 0 :(得分:139)

在Chrome上,即使您将scrollTop强制为0,它也会在第一次滚动事件后跳转。

您应该将滚动条绑定到:

$(window).on('beforeunload', function() {
    $(window).scrollTop(0);
});

因此浏览器被欺骗相信它是在刷新之前的开始。

答案 1 :(得分:44)

要禁用自动滚动恢复,只需将此标记添加到head部分。

<script>history.scrollRestoration = "manual"</script>

IE不支持。 Browser compatibility.

答案 2 :(得分:17)

经过多次失败后,我终于成功了。 anzo在此处是正确的,因为当用户重新加载页面或点击链接时,使用beforeunload会使页面跳转到顶部。所以unload显然是这样做的。

$(window).on('unload', function() {
   $(window).scrollTop(0);
});

Javascript方式(感谢ProfNandaa):

window.onunload = function(){ window.scrollTo(0,0); }

编辑:2015年7月16日

即使有unload事件,Firefox仍然存在跳转问题。

答案 3 :(得分:15)

由于浏览器行为的变化,不再推荐使用此解决方案。请参阅其他答案。

基本上,如果使用锚点,我们将绑定到窗口滚动事件。想法是第一个滚动事件必须属于浏览器完成的自动重新定位。发生这种情况时,我们会自行重新定位,然后删除绑定事件。这可以防止后续页面滚动使系统死机。

$(document).ready(function() {
    if (window.location.hash) { 
        //bind to scroll function
        $(document).scroll( function() {
            var hash = window.location.hash
            var hashName = hash.substring(1, hash.length);
            var element;

            //if element has this id then scroll to it
            if ($(hash).length != 0) {
                element = $(hash);
            }
            //catch cases of links that use anchor name
            else if ($('a[name="' + hashName + '"]').length != 0)
            {
                //just use the first one in case there are multiples
                element = $('a[name="' + hashName + '"]:first');
            }

            //if we have a target then go to it
            if (element != undefined) {
                window.scrollTo(0, element.position().top);
            }
            //unbind the scroll event
            $(document).unbind("scroll");
        });
    }

});

答案 4 :(得分:3)

你可以在最后放一个#,这样页面就会加载到顶部。

适用于所有浏览器,移动设备和桌面设备,因为它非常简单。


/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
// jscs:disable jsDoc

});

//这会在页面末尾加载#。

答案 5 :(得分:2)

这是一种更通用的方法。而不是试图阻止浏览器滚动(或跳到顶部,就像它看起来一样),我只是恢复页面上的先前位置。 即我正在localStorage中记录页面的当前y偏移量,并在页面加载后滚动到此位置。

function storePagePosition() {
  var page_y = window.pageYOffset;
  localStorage.setItem("page_y", page_y);
}


window.addEventListener("scroll", storePagePosition);


var currentPageY;

try {
  currentPageY = localStorage.getItem("page_y");

  if (currentPageY === undefined) {
    localStorage.setItem("page_y") = 0;
  }

  window.scrollTo( 0, currentPageY );
} catch (e) {
    // no localStorage available
}

答案 6 :(得分:2)

这对我有用。

    //Reset scroll top

    history.scrollRestoration = "manual"

    $(window).on('beforeunload', function(){
          $(window).scrollTop(0);
    });

答案 7 :(得分:1)

这绝对没问题。漂亮干净的javascript

    var objDiv = document.getElementById("chatbox");
if ( window.history.replaceState ) {
  objDiv.scrollTop = objDiv.scrollHeight;

    window.history.replaceState( null, null, window.location.href );
}

答案 8 :(得分:-1)

你应该可以。

Onload,检查window.location.hash是否有值。如果是,请使用与哈希值匹配的id获取元素。找到元素的位置(对offsetTop / offsetLeft的递归调用),然后将这些值传递给window.scrollTo(x, y)方法。

这应该将页面滚动到所需的元素。