在HTML中刷新页面时强制页面滚动到顶部

129

我正在建立一个要发布的网站 div s一起。当页面滚动到位置X后刷新页面时，页面的滚动位置为X。

如何强制页面刷新到页面顶部？

我能想到的是作为onLoad()页面功能运行的某些JS或jQuery ，以设置页面滚动到顶部。但是我不知道该怎么办。
一个更好的选择是，如果有一些属性或东西要让页面默认加载其滚动位置（即在顶部），这有点像页面加载，而不是页面刷新。

— 月亮
source

令人惊讶的是，这里没有一种解决方案对我有用，但是这个解决方案确实起作用：stackoverflow.com/a/11486546/470749

— Ryan

165

您可以使用DOM ready上的scrollTop方法来做到这一点：

$(document).ready(function(){
    $(this).scrollTop(0);
});

— 拍
source

9

在Safari上不起作用。但这-> stackoverflow.com/a/18633915/102133可以。

— 2014年

165

对于简单的普通 JavaScript实现：

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

展开摘要

— 南达教授
source

1

这是正确的答案。jQuery解决方案并非在所有情况下都有效。

— 哈里·史蒂文斯

@ Paul12_-我刚刚对其进行了测试，对Safari 11.0.3我来说还可以，您使用的是哪一个？

— ProfNandaa '18

这对我不起作用。我必须从onbeforeload函数返回以使其工作。

— 伊克巴尔（Iqbal）

@Iqbal-你是return什么？

— ProfNandaa

1

添加document.querySelector('html').style.scrollBehavior = '';可能也是必要的。如果将其设置为smooth，则可能无法在页面重新加载之前到达顶部。

— kevnk

35

此处的答案不适用于Safari，document.ready，通常开得太早。

可以使用该beforeunload事件来防止您形成某些行为setTimeout

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

— 本
source

1

滚动后添加功能：$（'html'）。text（''）; ，因此童车将被重设

— user956584 2014年

1

@Userpassword您认为$（“ html”）。remove（）会更好吗？

— 奔

18

同样，最佳答案是：

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

（对于非jQuery，如果要搜索JQ方法，请查找）

编辑：有点错误，它的“ onbeforunload” :) Chrome和其他浏览器“记住”卸载前的最后一个滚动位置，因此，如果将值设置为0,0就在页面卸载之前，它们将记住0,0并赢得了不会滚动回到滚动条所在的位置：）

— 木素
source

@ Paul12_ Safari需要document.documentElement.scrollTop工作。我通常同时使用两者。

— Graham O'Mahony

9

在这里检查jQuery .scrollTop()函数

看起来像

$(document).load().scrollTop(0);

— jon3laze
source

9

您也可以尝试

$(document).ready(function(){
    $(window).scrollTop(0);
});

如果要在x位置滚动，则可以将0的值更改为x。

— 安奇
source

7

相反location.reload()，只需使用即可location.href = location.href。它不会像以前那样滚动到上一个位置location.reload()。

注意：如果网址中包含＃号，则不会重新加载

— 瑙帕尔
source

4

<script> location.hash = (location.hash) ? location.hash : " "; </script>

将以上脚本放入<head>html的标记中。不确定单页应用程序的行为！但可以肯定的是，它在常规页面中的作用就像魅力。

— 刺眼53
source

4

答案在这里（滚动到 $(document).ready如果页面中有视频，则）不起作用。在这种情况下，触发此事件后将滚动页面，从而覆盖了我们的工作。

最佳答案应该是：

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

— DrPollit0
source

3

$(document).ready(function(){
    $(window).scrollTop(0);
});

不适用于我，因为Google Chrome在页面加载完成后会向下滚动。我用的是

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

//这会加载页面末尾的＃号。因此它将始终加载在顶部。

— 达特
source

2

要重置窗口，请滚动回到顶部，$(window).scrollTop(0)在beforeunload事件中可以找到窍门，但是，我在Chrome 80中进行了测试，重新加载后它将回到原来的位置。

为防止这种情况，请将设置history.scrollRestoration为"manual"。

//Reset scroll top

history.scrollRestoration = "manual";

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

— 亚历克斯开心
source

这对我来说是最好的响应，可在Chrome / Linux上使用

— SNS-Web et Informatique

0

超级脆弱的解释是：

将此添加到您的js文件或脚本标签的顶部

document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera

document.body.scrollTop = 0; // For Safari

— 尼科贝尔
source