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

Question

如果您 go 到页面 a 并滚动然后刷新页面将在您离开它的位置刷新。 这很好，但是这也发生在 url 中有锚点位置的页面上。 例如，如果您单击链接http://example.com/post/244#comment5并在环顾四周后刷新页面，您将不会处于锚点并且页面会跳来跳去。 javascript 有什么方法可以防止这种情况发生吗？ 因此，无论如何，您总是会导航到锚点。

Answer 1

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

您应该将滚动绑定到此：

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

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

Answer 2

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

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

IE 不支持。 浏览器兼容性。

Answer 3

经过多次失败后，我终于成功了。 anzo在这里是正确的，因为使用beforeunload将使页面在用户重新加载页面或单击链接时跳转到顶部。 因此， unload显然是执行此操作的方法。

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

Javascript 方式（感谢ProfNandaa ）：

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

编辑：2015 年 7 月 16 日

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

Answer 4

由于浏览器行为的变化，不再推荐使用此解决方案。 查看其他答案。

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

$(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");
        });
    }

});

Answer 5

这是一个更通用的方法。 而不是试图阻止浏览器滚动（或像看起来那样跳到顶部），我只是恢复页面上以前的 position 。 即，我正在 localStorage 中记录页面的当前 y 偏移量，并在页面加载后滚动到此 position。

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
}

Answer 6

您可以在末尾添加一个#，这样页面就会在顶部加载。

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

$(document).ready(function() {
var url = window.location.href;
console.log(url);
if( url.indexOf('#') < 0 ) {
    window.location.replace(url + "#");
} else {
    window.location.replace(url);
}

});

// 这会加载最后带有 # 的页面。

Answer 7

这对我有用。

    //Reset scroll top

    history.scrollRestoration = "manual"

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

Answer 8

这绝对没问题。 干净整洁 javascript

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

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

Answer 9

你应该能够。

加载，检查window.location.hash是否有值。 如果是这样，请获取 ID 与 hash 值匹配的元素。 找到元素的 position（递归调用 offsetTop/offsetLeft），然后将这些值传递给window.scrollTo(x, y)方法。

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