Javascript 在 HTML 中的页面刷新时强制页面滚动位置到顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3664381/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Force page scroll position to top at page refresh in HTML
提问by Moon
I am building a website which I am publishing with divs. When I refresh the page after it was scrolled to position X, then the page is loaded with the scroll position as X.
我正在建立一个网站，我用divs发布。当我在滚动到位置 X 后刷新页面时，页面将加载滚动位置为 X。
How can I force the page to be scrolled to the top on page refresh?
如何强制页面在页面刷新时滚动到顶部？
What I can think of is of some JS or jQuery run as
onLoad()function of the page to SETthe pages scroll to top. But I don't know how I could do that.A better option would be if there is some property or something to have the page loaded with its scroll position as default (i.e. at the top) which will be kind of like page load, instead of page refresh.
我能想到的是一些 JS 或 jQuery 作为
onLoad()页面的函数运行来设置页面滚动到顶部。但我不知道我怎么能做到这一点。更好的选择是，如果有一些属性或某些东西可以将页面加载为默认滚动位置（即在顶部），这将类似于page load，而不是page refresh。
回答by Pat
回答by ProfNandaa
For a simple plainJavaScript implementation:
对于简单的纯JavaScript 实现：
window.onbeforeunload = function () {
window.scrollTo(0, 0);
}回答by Ben
The answer here does not works for safari, document.ready is often fired too early.
这里的答案不适用于 safari，document.ready 经常被过早地触发。
Ought to use the beforeunloadevent which prevent you form doing some setTimeout
应该使用beforeunload阻止你做一些事情的事件setTimeout
$(window).on('beforeunload', function(){
$(window).scrollTop(0);
});
回答by xoxel
Again, best answer is:
再次，最佳答案是：
window.onbeforeunload = function () {
window.scrollTo(0,0);
};
(thats for non-jQuery, look up if you are searching for the JQ method)
（对于非 jQuery，如果您正在搜索 JQ 方法，请查找）
EDIT: a little mistake its "onbeforunload" :) Chrome and others browsers "remember" the last scroll position befor unloading, so if you set the value to 0,0 just before the unload of your page they will remember 0,0 and won't scroll back to where the scrollbar was :)
编辑：它的“onbeforunload”有点错误:) Chrome 和其他浏览器“记住”卸载前的最后一个滚动位置，因此如果您在卸载页面之前将该值设置为 0,0，它们将记住 0,0 并获胜不滚动回滚动条所在的位置:)
回答by jon3laze
回答by Ankit
You can also try
你也可以试试
$(document).ready(function(){
$(window).scrollTop(0);
});
If you want to scroll at x position than you can change the value of 0 to x.
如果要在 x 位置滚动，则可以将 0 的值更改为 x。
回答by Nauphal
Instead of location.reload(), simply use location.href = location.href. It will not scroll to the previous position as location.reload()does.
而不是location.reload()，只需使用location.href = location.href. 它不会像以前那样滚动到前一个位置location.reload()。
Note: This will not reload if there is any # in the URL
注意：如果 URL 中有任何 #，这将不会重新加载
回答by DrPollit0
The answer here(scrolling in $(document).ready) doesn't work if there is a video in the page. In that case the page is scrolled after this event is fired, overriding our work.
$(document).ready如果页面中有视频，这里的答案（滚动）不起作用。在这种情况下，页面会在触发此事件后滚动，覆盖我们的工作。
Best answer should be:
最佳答案应该是：
$(window).on('beforeunload', function(){
$(window).scrollTop(0);
});
回答by harshes53
<script> location.hash = (location.hash) ? location.hash : " "; </script>
Put the above script in <head>tag of your html. Not sure how single page apps behave! But sure works like charm in regular pages.
将上面的脚本放在<head>你的 html 标签中。不确定单页应用程序的行为！但在普通页面中确实像魅力一样工作。
回答by Daut
$(document).ready(function(){
$(window).scrollTop(0);
});
did not work for me as google chrome would just scroll back down after the page finished loading. What I used was
对我不起作用，因为谷歌浏览器会在页面加载完成后向下滚动。我用的是
$(document).ready(function() {
var url = window.location.href;
console.log(url);
if( url.indexOf('#') < 0 ) {
window.location.replace(url + "#");
} else {
window.location.replace(url);
}
});
// This loads the page with a # at the end. So it will always load at the top.
// 这会以# 结尾加载页面。所以它总是加载在顶部。
