The same old issue, .scrollTop(0) not working in Chrome & Safari
I had the same problem. If I put
$(window).scrollTop(0);
in the document ready handler, it didn't work; but if I test it in the javascript console panel of Chrome developer toolkit, it worked! The only difference was the execution time of the script. So I tried
window.setTimeout(function() {
$(window).scrollTop(0);
}, 0);
and it worked. Setting a delay greater than 0 is not neccesary, although that also worked. It's not jQuery's fault, because it is the same with
window.scrollTo(0, 0); window.scroll(0, 0);
So the reason might be the browser populates the window.pageYOffset property after it renders the page and executes the js.
For people that need the overflow settings, the workaround is to use an animation like this.
$('#element_id').stop().animate({ scrollTop: 0 }, 500);
This seems to behave better than .scrollTop(0)
.
The problem is with CSS. In particular, the rules I've included below.
html, body {
overflow-x: hidden;
overflow-y: auto;
}
Though these rules are obviously related to scrollbars, I'm not sure why they are causing the behavior you are observing. But if you remove them, it should solve your problem.
See: http://jsfiddle.net/jNWUm/23/.