首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >防止浏览器在刷新时自动滚动

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

Stack Overflow用户
提问于 2011-08-12 11:35:40
回答 8查看 110.5K关注 0票数 105

如果您转到页面a并滚动,然后刷新,页面将在您离开它的位置刷新。这很好,但是这也会发生在url中有锚点位置的页面上。一个例子是,如果你点击了一个链接http://example.com/post/244#comment5,并在环顾四周后刷新了页面,你就不会站在锚点上,页面会跳来跳去。有没有办法用javascript来防止这种情况呢?所以不管你什么时候都会导航到锚点。

EN

回答 8

Stack Overflow用户

回答已采纳

发布于 2011-08-12 12:46:03

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

基本上,如果使用锚点,我们将绑定到windows scroll事件。其思想是第一滚动事件必须属于由浏览器完成的自动重新定位。当这种情况发生时,我们自己重新定位,然后删除绑定的事件。这可以防止后续的页面滚动借用系统。

代码语言:javascript
复制
$(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");
        });
    }

});
票数 16
EN

Stack Overflow用户

发布于 2013-09-05 18:30:34

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

您应该将滚动绑定到以下内容:

代码语言:javascript
复制
$(window).on('beforeunload', function() {
    $(window).scrollTop(0);
});

因此,浏览器会被欺骗,以为它是在刷新之前的开始。

票数 160
EN

Stack Overflow用户

发布于 2017-10-13 12:42:10

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

代码语言:javascript
复制
<script>history.scrollRestoration = "manual"</script>

IE不支持它。Browser compatibility.

票数 99
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/7035331

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档