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

回答1:

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?

回答2:

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

回答3:

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

回答4:

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