jQuery scroll to top with .animate - jumps to bott

Question

I have the following jQuery snippet

$('html, body').animate({
    scrollTop: 178
}, 2000);

I have some pagination buttons at the bottom of the page, that trigger a javascript function when they are clicked. In this JS function, the above snippet is called.

This works fine to scroll the page back to the top just above the menu, but first of all the page seems to jump down to the very bottom abruptly (unless you are already at the very bottom) before scrolling up like it should?

I am tearing my hair out trying to figure this behaviour out.

I'm not sure how else to explain it apart from giving a link to the site: http://tinyurl.com/apdloyl

Go to the bottom of the page once the results have loaded, scroll up slightly, then click the next page button. And the weirdness happens as the page jumps down before scrolling back up.

Thanks for any help.

Answer 1

I've picked something up from an article on oncemade.com:

$('html:not(:animated),body:not(:animated)').animate(...);

Example: http://jsfiddle.net/ddthK/1/

EDIT:

After looking at the provided link a bit more, there is another thing that might be causing the glitch. Try to wait before results are fully loaded before animating the scroll. From where I am, it shouldn't be a long wait. Alternatively, scroll first, and then reload the content, and perhaps set the loading spinner before you do the scroll. To explain, I think the glitch is caused by page size changing during the scroll.

Answer 2

So my solution was as follows

I had a container div, #main, which had a height of 'auto' set in CSS.

When my pagination button was pressed, the contents of this div were wiped and replaced with new content via ajax.

When the contents were removed, the browser window shrunk and as a result you were always bumped to the bottom of the page.

My fix was to immediately grab the height of the div, set it to it's current height in fixed format, do the scroll to the top, and then once the scrollback was complete reset the div's height to auto.

Something like:

/* First we have to fix the height of the #main element to prevent a nasty looking jerk                      when the ajax content dissapears */
var height = $('#main').height();
$('#main').height(height);

/* Then we can scroll to the top */
$('html, body').animate({
scrollTop: 178
}, 2000, function() {

    /* Then reset height to auto */
    $('#main').css('height','auto');

});

There are probably other more elegant ways of doing it but this works for me