First, let me point out, i've googled and even looked at answers on here like this and this, however, I'm still yet to find a working solution for my case.
I've designed a page that has several fixed elements covering the page and makes of html5/css3 to create a clean "mask" over the main document, thus allowing the body scroll bar to still scroll the underlying content.
In firefox and ie (bleh), scrollTop(0) is working perfect. However, as stated by the question, not so much in my fav browsers.
Something I've made note of is to call the following both before the scrollTo event and after
$("body,html,document").each(function(){ console.log($(this).scrollTop()); });
The results were not pleasing, it tells me that the scrolltop is already 0 and thus is not even attempting a scrollTop, or at least that's what I "think" thus far.
And before you ask, i made that console call on each of those 3 items as the document scrolltop should be covered within one of those items (i would think body, but like in ie you have to call html too)
Any takers on ideas?
FYI, it may be a css oddity (tho how it works in IE and not chrome i really cant understand) but I have already tried the following with negative results:
$(window).scrollTop(0);
$(document).scrollTop(0);
$("html").scrollTop(0);
$("body").scrollTop(0);
window.scroll(0,0);
$("body,html,document").scrollTop(0);
$("body,html").scrollTop(0);
Which I suppose extends my question, is this a css issue? I dont have an outside link and the code is too long (made with CI view Partials) to post all of it, but to CLARIFY what i've done:
temp Fiddle no longer up
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.