Reload browser does not reset page to top

I thought when you clicked refresh, that the browser was supposed to reset your page to the top? I am using a js accordion and when I refresh, it closes the accordion but does not reposition the page to the top.

http://imip.rvadv.com/index3.html

Answers:

Answer

Well, as you can see, it does not :)

But you can force it with some simple jQuery:

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

EDIT:

The only way that seems to work in IE 9, FF 12 and Chrome 20.0 is the following:

$(document).ready(function(){
    $('html').animate({scrollTop:0}, 1);
    $('body').animate({scrollTop:0}, 1);
});

Strange thing is that when I tried scrolling the elements directly without applying any animation (that is, $('html').scrollTop(0)), it didn't work. Since the duration is set to 1 millisecond, the user will not notice anything.

I would be glad if anyone could shed some light on this - why does the scrolling only work with animations?

Answer

Try this if none of the above worked. This will trick the browser to think it was at the top of the document before refresh.

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

The browser will scroll down to where you were before the reload, as an attempt at convenience. It's only really useful for excessively long pages.

You can "fix" this like so:

window.onload = function() {document.body.scrollTop = document.documentElement.scrollTop = 0;};
Answer

Based on last comment by comonpyke and own tests I recommend

$(document).ready(function(){
    $('html, body').scrollTop(0);

    $(window).on('load', function() {
    setTimeout(function(){
        $('html, body').scrollTop(0);
    }, 0);
 });
});
  • First scrollTop scrolls early
    • after document ready
  • Second scrollTop scrolls late
    • after load event
      • and after timeout

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.