12

I've noticed that if you are on a page and you have scrolled down a good bit, if you refresh the page, most browsers will jump you back down to your position. Is there any way to prevent this?

I have looked at two options and neither are consistent across Webkit / Firefox.

    window.scrollTo(0, 1);
    $('html, body').animate({ scrollTop: 0 }, 0);

Any ideas?

You can check a google search result for an example.

10
  • This is the opposite of what people usually want. However, if you simply add a hash # to the end of the URL, it will jump to the top on refresh, by default.
    – Sparky
    Mar 4, 2012 at 1:07
  • 4
    @minitech I read that as the OP wanting to prevent the browser returning to previous scroll position as Sparky672 suggests, and instead returning to the top. Mar 4, 2012 at 1:11
  • @minitech: Actually the question is how to prevent the scrolling.
    – Niklas B.
    Mar 4, 2012 at 1:12
  • 3
    @minitech - Actually the OP seems to want the opposite, it says "most browsers will jump you back down to your position. Is there any way to prevent this", and for most people that would indicate that the OP would like the page to NOT scroll down to the previous position ?
    – adeneo
    Mar 4, 2012 at 1:13
  • 1
    @Mark Davidson: In that case, Sparky672's initial suggestion should help. I think this should be an answer.
    – Niklas B.
    Mar 4, 2012 at 1:15

5 Answers 5

15

Works for me:

// Scroll top bro
window.onload = function() {
 setTimeout (function () {
  scrollTo(0,0);
 }, 0);
}
3
  • 3
    This is a better answer. The setTimeout helps catch awkward race conditions with some browsers which trigger the scroll jump after the window.onload event.
    – tohster
    Jun 19, 2013 at 17:26
  • agreed, this answer was the one that actually worked for me. Safari 6.1.1 on Mac would at first run my scrollTo code, then jump down to the previous position after page load. doing this won the race. Jan 22, 2014 at 9:26
  • This worked perfectly in Google Chrome. Thanks a ton!
    – Devner
    Oct 20, 2014 at 9:15
11

On Chrome, even if you force scrollTop to 0 it will jump afterwards after the first scroll event.

You should bind the scroll to this:

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

So the browser is tricked to believe that it was on the beginning before the refresh.

6

I see no reason why this shouldn't work in all browsers, seems to work for me (with only one function for window.onload, use more and there could be problems) ?

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

To make it work when back button is clicked aswell, maybe something like this:

<body onunload="">
<script type="text/javascript">
    window.onload = function() {
       scrollTo(0,0);
    }
</script>
//content here
</body>
2
  • What's that empty onunload="" doing there?
    – Sparky
    Mar 4, 2012 at 2:38
  • The onunload is for the bfcache Mar 4, 2012 at 4:12
1

Something like below works for me, create some item that can be focused and focus it to scroll page.

In this case it will scroll back to top after refresh the page.

Tested on latest IE/FF/Chrome.

    <html>
    <head>
        <script type="text/javascript">
            window.onload = function () {
                setTimeout (function () {
                    // use both 'a' and 'button' because 'a' not work as expected on some browsers
                    document.getElementById('top_anchor').focus();
                    document.getElementById('top_anchor_btn').focus();
                }, 0);
            }
        </script>
    </head>
    <body>
        <a id="top_anchor" href="" style="width: 1px; height: 1px; position: absolute; top: 0px; left: -1000px;"></a>
        <button id="top_anchor_btn" href="" style="width: 1px; height: 1px; position: absolute; top: 0px; left: -1000px;"></button>

        <div> top </div>
        <div style="width: 500px; height: 2000px; background-color: #83FEBC;">
            content
        </div>
    </body>
</html>

Regards,

Ben

1
  • 1
    Just make sure do it later, chrome need it.
    – benbai123
    Mar 4, 2012 at 2:34
0

Just to update what @josetapadas said, for recent versions it would be better to use the unload function instead of beforeunload this will be

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.