Force page scroll position to top at page refresh in HTML

Force page scroll position to top at page refresh in HTML

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.

Solutions/Answers:

Solution 1:

You can do it using the scrollTop method on DOM ready:

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

Solution 2:

For a simple plain JavaScript implementation:

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

Solution 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);
});

Solution 4:

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.

Solution 5:

Check the jQuery .scrollTop() function here

It would look something like

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

Solution 6:

Again, best answer is:

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

(thats for non-jQuery, look up if you are searching ofr 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 befor the unload of your page they will remember of 0,0 and won’t scroll back to where the scrollbar was 🙂