Question

我注意到，如果你在一个页面上并且你向下滚动了一下，如果你刷新页面，大多数浏览器会让你跳回到你的位置。有什么方法可以防止这种情况吗？

我看过两个选项，并且在Webkit / Firefox中都不一致。

    window.scrollTo(0, 1);
    $('html, body').animate({ scrollTop: 0 }, 0);

有什么想法吗？

您可以查看Google搜索结果以获取示例。

Answer 1

适合我：

// Scroll top bro
window.onload = function() {
 setTimeout (function () {
  scrollTo(0,0);
 }, 0);
}

Answer 2

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

您应该将滚动条绑定到：

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

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

Answer 3

我认为没有理由为什么它不适用于所有浏览器，似乎对我有用（只有一个window.onload函数，使用更多，可能会出现问题）？

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

要在单击后退按钮时使其工作，也许是这样的：

<body onunload="">
<script type="text/javascript">
    window.onload = function() {
       scrollTo(0,0);
    }
</script>
//content here
</body>

Answer 4

像下面这样的东西适用于我，创建一些可以聚焦的项目并将其聚焦到滚动页面。

在这种情况下，它会在刷新页面后滚动回顶部。

在最新的IE / FF / Chrome上测试过。

    <html>
    <head>
        <script type="text/javascript">
            window.onload = function () {
                setTimeout (function () {
                    // use both 'a' and 'button' because 'a' not work as expected on some browsers
                    document.getElementById('top_anchor').focus();
                    document.getElementById('top_anchor_btn').focus();
                }, 0);
            }
        </script>
    </head>
    <body>
        <a id="top_anchor" href="" style="width: 1px; height: 1px; position: absolute; top: 0px; left: -1000px;"></a>
        <button id="top_anchor_btn" href="" style="width: 1px; height: 1px; position: absolute; top: 0px; left: -1000px;"></button>

        <div> top </div>
        <div style="width: 500px; height: 2000px; background-color: #83FEBC;">
            content
        </div>
    </body>
</html>

此致

本

Answer 5

只是为了更新@josetapadas所说的内容，对于最新版本，最好使用unload函数而不是beforeunload这将是

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

使用Javascript防止刷新“跳转”

5 个答案: