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

  • Z时代
  • 2024-01-10
  • 分类：问答

如果转到页面a并滚动浏览，则刷新页面将在您离开页面的位置刷新。这很好，但是在URL中存在锚点位置的页面上也会发生这种情况。例如，如果您单击一个链接http://example.com/post/244#comment5并在环顾四周后刷新页面，您将不会处于锚点，而页面会跳来跳去。有什么办法可以防止使用javascript吗？因此，无论如何，您始终可以导航到锚点。

回答：

由于浏览器行为的更改，不再建议使用此解决方案。查看其他答案。

基本上，如果使用锚，则将绑定到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");
        });
    }
});

以上是 防止浏览器在刷新时自动滚动 的全部内容， 来源链接： utcz.com/qa/403993.html

回到顶部