javascript - Force page scroll position to top at page refresh in HTML - Stack Overflow

admin管理员组

文章数量:1131555

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.

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.

• javascript
• jquery
• html
• pageload
• page-refresh

Share Improve this question Follow edited Mar 27, 2017 at 7:46 MC Emperor 23k1515 gold badges8787 silver badges136136 bronze badges asked Sep 8, 2010 at 3:07 MoonMoon 20k5656 gold badges141141 silver badges203203 bronze badges 2

• Surprisingly, none of the solutions here worked for me, but this one did: stackoverflow.com/a/11486546/470749 – Ryan Commented Feb 21, 2017 at 16:17
• I came here because I want the opposite behavior of what @Moon is asking for. EMACS impatient-mode keeps sending my web browser to the top of the document when I type new text into a buffer. This is disorientating and I wish I could make EMACS impatent-mode stop doing that. – Shawn Eary Commented Mar 21, 2023 at 16:35

Add a comment  | 

17 Answers 17

Sorted by: Reset to default 261 +100

For a simple plain JavaScript implementation:

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

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

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

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

To reset window scroll back to top, $(window).scrollTop(0) in the beforeunload event does the tricks, however, I tested in Chrome 80 it will go back to the old location after the reload.

To prevent that, set the history.scrollRestoration to "manual".

//Reset scroll top

history.scrollRestoration = "manual";

$(window).on('beforeunload', function(){
      $(window).scrollTop(0);
});

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 :)

The JS history API has the scrollRestoration property, which when set to manual, prevents the last scroll location on the page to be restored:

if (history.scrollRestoration) {
    history.scrollRestoration = 'manual';
} else {
    window.onbeforeunload = function () {
        window.scrollTo(0, 0);
    }
}

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.

Check the jQuery .scrollTop() function here

It would look something like

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

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

<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.

$(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.

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

I found that these CSS styles force the page to always scroll to top on reload/refresh:

html {
    height: 100%;
    overflow: hidden;
    width: 100%;
}

body {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
}

You can use location.replace instead of location.reload:

location.replace(location.href);

This way page will reload with scroll on top.

This is one of the best way to do so:

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

you can use it it your html page to as:

history.scrollRestoration = "manual";

$(window).on('beforeunload', function(){
    $(window).scrollTop(0);
});

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

本文标签： javascriptForce page scroll position to top at page refresh in HTMLStack Overflow