我正在构建一个网站，使用div发布。当我将页面滚动到位置X后刷新页面后，页面会加载并保持滚动位置在X。
如何强制页面在刷新时滚动到顶部？
我能想到的方法是，在
onLoad()函数中运行一些JS或jQuery代码来设置页面滚动到顶部。但我不知道该怎么做。更好的选择是是否有某个属性或其他东西可以将页面加载为默认滚动位置（即在顶部），这将类似于页面加载，而不是页面刷新。
在HTML中，如何强制页面刷新时滚动位置返回顶部
177
- Moon
2
出人意料的是，这里的解决方案都对我无效，但是这个可以：https://dev59.com/SmbWa4cB1Zd3GeqPTR7E#11486546 - Ryan
我来这里是因为我想要与@Moon所要求的相反行为。 EMACS的impatient-mode在我向缓冲区输入新文本时，会不断将我的网络浏览器发送到文档顶部。这让人感到迷失，我希望能够让EMACS的impatient-mode停止这样做。 - Shawn Eary
17个回答
249
对于一个简单的普通 JavaScript 实现：
window.onbeforeunload = function () {
window.scrollTo(0, 0);
}- ProfNandaa
13
@Paul12_ - 我刚在
Safari 11.0.3 上测试了一下，对我来说能正常工作，你使用的是哪个版本？ - ProfNandaa1可能需要添加
document.querySelector('html').style.scrollBehavior = '';。如果它被设置为 smooth，在页面重新加载之前可能无法到达顶部。 - kevnk在Firefox上无法工作。 - Lenka Pitonakova
@LenkaPitonakova - 你能分享一下你正在使用的代码吗？在我的端上运行正常... - ProfNandaa
@ProfNandaa 奇怪，我只是复制粘贴了答案中的那个。如果有帮助的话，我使用的是Mac电脑。 - Lenka Pitonakova
显示剩余8条评论
39
这里的答案不适用于Safari浏览器， document.ready经常会过早触发。
应该使用beforeunload事件来防止您执行某些setTimeout
$(window).on('beforeunload', function(){
$(window).scrollTop(0);
});
- Ben
2
1在滚动函数后添加：$('html').text('');，这样滚动条就会被重置。 - user956584
1@Userpassword 你不觉得 $("html").remove() 更好吗？ - Ben
29
为了将窗口滚动条重置到顶部，可以在 beforeunload 事件中使用
$(window).scrollTop(0) 方法。但是，在 Chrome 80 测试时，重新加载后会返回到旧位置。为了避免这种情况，请将 history.scrollRestoration 设置为 "manual"。//Reset scroll top
history.scrollRestoration = "manual";
$(window).on('beforeunload', function(){
$(window).scrollTop(0);
});
- Alex Having Fun
2
2这对我来说是最好的响应，在Chrome/Linux上运行。 - SNS - Web et Informatique
1这太棒了。在多页面情况下，只需在js函数中使第二个页面可见后添加两行代码
history.scrollRestoration = "manual"; 和 $(window).scrollTop(0); 即可。 - nightrain27
最佳答案如下：
window.onbeforeunload = function () {
window.scrollTo(0,0);
};
（这适用于非jQuery，如果你正在寻找JQ方法，请查找）
编辑：有一个小错误，应该是"onbeforeunload" :)
Chrome和其他浏览器会在卸载之前“记住”最后的滚动位置，所以如果你在页面卸载之前将值设置为0,0，它们就会记住0,0，并且不会滚动回滚动条所在的位置:)- xoxel
1
@Paul12_ Safari需要使用
document.documentElement.scrollTop才能正常工作。但我通常会同时使用两者。 - Graham John11
您还可以尝试
$(document).ready(function(){
$(window).scrollTop(0);
});
- Ankit
11
JS历史记录API具有scrollRestoration属性，当设置为手动时，会防止恢复页面上的最后滚动位置：
if (history.scrollRestoration) {
history.scrollRestoration = 'manual';
} else {
window.onbeforeunload = function () {
window.scrollTo(0, 0);
}
}
- Pecata
2
1这是一个很好的答案，如果你正在开发一个你知道浏览器会支持它的项目，甚至可以简单地使用
history.scrollRestoration = 'manual'; 这一行代码。 - rebane2001谢谢，如果你正在使用SSR并且窗口不可用，改为一行可能会有所不同。 - Pecata
7
不要使用 location.reload()，而是直接使用 location.href = location.href。它不会像location.reload()那样滚动到上一个位置。
注意：如果URL中有任何#符号，则不会重新加载
- Nauphal
5
<script> location.hash = (location.hash) ? location.hash : " "; </script>
将上述脚本放置在html的
<head>标签中。不确定单页应用程序的行为！但在常规页面中确实像魅力一样工作。- harshes53
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接