logo标签列表

在HTML中，如何强制页面刷新时滚动位置返回顶部

javascriptjqueryhtmlpageloadpage-refresh
177

我正在构建一个网站，使用div发布。当我将页面滚动到位置X后刷新页面后，页面会加载并保持滚动位置在X。

如何强制页面在刷新时滚动到顶部？

  • 我能想到的方法是，在onLoad()函数中运行一些JS或jQuery代码来设置页面滚动到顶部。但我不知道该怎么做。

  • 更好的选择是是否有某个属性或其他东西可以将页面加载为默认滚动位置（即在顶部），这将类似于页面加载，而不是页面刷新。

出人意料的是，这里的解决方案都对我无效，但是这个可以：https://dev59.com/SmbWa4cB1Zd3GeqPTR7E#11486546 - Ryan
我来这里是因为我想要与@Moon所要求的相反行为。 EMACS的impatient-mode在我向缓冲区输入新文本时，会不断将我的网络浏览器发送到文档顶部。这让人感到迷失，我希望能够让EMACS的impatient-mode停止这样做。 - Shawn Eary
17个回答
4
$(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);
    }
});

// 这将在页面结尾加上 #。这样它就始终会加载到顶部。

4

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

最佳答案应该是：

$(window).on('beforeunload', function(){
    $(window).scrollTop(0);
});
3
我发现这些 CSS 样式会在重新加载/刷新页面时强制将页面滚动到顶部：
html {
    height: 100%;
    overflow: hidden;
    width: 100%;
}

body {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
}
可以确认这个有效。希望有人能够给出解释，但无论如何，这应该是第二高的答案（高于所有那些非常重复的.scrollTop(0)）。 - Tigerrrrr
2
这是实现此目的的最佳方法之一： 

<script>
$(window).on('beforeunload', function() {
  $('body').hide();
  $(window).scrollTop(0);
});
</script>

1
你可以在你的HTML页面中使用它，如下所示：
history.scrollRestoration = "manual";

$(window).on('beforeunload', function(){
    $(window).scrollTop(0);
});
你能否解释一下你的代码在做什么以及为什么会有效？看起来很合理，但你需要更详细地解释给其他读者听。 - shadow2020
1
你的回答可以通过提供额外的支持性信息来改进。请进行[编辑]以添加更多细节，例如引证或文献资料，以便其他人可以确认您的答案正确。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community
1
你可以使用 location.replace 替代 location.reload:
location.replace(location.href);

这样页面将重新加载，并滚动到顶部。
这似乎是有效的，但我找不到解释为什么它有效的文档。如果有人有，请分享！ - Jake Worth
0

超级棒的答案是：

在你的 js 文件或 script 标签 的顶部添加以下内容：

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

document.body.scrollTop = 0; // For Safari
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接