I cannot understand this problem so I have to ask. I'm trying to do a very simple jQ scroll to element on a click event. I've successfully build the same function before on a different page.
$('li.newsmenu a').click(function() {
$('html, body').animate({scrollTop: $('section#news').offset().top});
return false;
});
My selectors are both fine.
I've tested the click event and it will give me an alert('like this');
In the console the $('section#news').offset().top value returns a sensible 717.
I've tested in Chrome & Safari with no success.
I'm working on top of someone else's work and on top of the HTML5 boilerplate Wordpress theme system and I wonder if there is something in that.
Does anyone have any ideas? This is driving me nuts.
Okay, this looks like a webkit issue. By specifying
html, body { height: 100%; }
it is limiting their 'height' to that of the window. So scrollTop(x) never works. If you modify your CSS not to include these declarations everything works again. One other workaround would be to place your body content in a scrollable div and scroll THAT instead. I want to say that this is a webkit bug as the behavior seems bizarre. You can see it for yourself by scrolling down the window a little ways. Then query the current scrollTop value on everything, it's always zero! body, html, document, window, div#top, etc, etc.