可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
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.
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 SET the 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.
回答1:
You can do it using the scrollTop method on DOM ready:
$(document).ready(function(){
$(this).scrollTop(0);
});
回答2:
For a simple plain JavaScript implementation:
window.onbeforeunload = function () {
window.scrollTo(0, 0);
}
回答3:
The answer here does not works for safari,
document.ready is often fired too early.
Ought to use the beforeunload event which prevent you form doing some setTimeout
$(window).on('beforeunload', function(){
$(window).scrollTop(0);
});
回答4:
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)
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 :)
回答5:
Check the jQuery .scrollTop() function here
It would look something like
$(document).load().scrollTop(0);
回答6:
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.
回答7:
Instead of location.reload(), simply use location.href = location.href. It will not scroll to the previous position as location.reload() does.
Note: This will not reload if there is any # in the URL
回答8:
<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.
回答9:
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.
Best answer should be:
$(window).on('beforeunload', function(){
$(window).scrollTop(0);
});
回答10:
$(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.
回答11:
The supercalifragilisticexpialidocious answer is:
add this at the top of your js file or script tag
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
document.body.scrollTop = 0; // For Safari
