Jquery "scrollTop" & "height" .click delay issues

Question

Having a couple of small issues with my code. I've written out a JQUERY sequence where you would click "sign up" and you get scrolled down where a form reveals itself. For now I have a button on the bottom where the function closes the form and scrolls you back to the top.

The example can be seen here: http://www.icecable.com/sandbox/priority%5Fsign%5Fup/test.html

Click on "Sign Up Now" and the animation works correctly. Click "Close and Return to Top" and the animation, again, works correctly. The problem comes after this.

If you try clicking on either "Sign Up Now" button the "height" animation begins as normal but there is a large delay on the "scrollTop" animation for no apparent reason.

Here is my code

$(document).ready(function() {

$('.dealer').click(function(e) {
    e.preventDefault();
    $('html, body').animate({
        scrollTop: '860'
    }, 1800, "easeInOutQuint");
});

$('.top').click(function(e) {
    e.preventDefault();
    $('html, body').animate({
        scrollTop: '0px'
    }, 1500, "easeInOutQuint");
});

$('.dealer').click(function(e) {
    e.preventDefault();
  $('#priority').animate({
    height: 'show'
    }, 1200,  "easeInOutCirc");
});

$('.top').click(function(e) {
    e.preventDefault();
  $('#priority')
    .animate({
        height: 'hide'
        }, 590, "easeInQuint");

});

//Form for Distributors

$('.distributor').click(function(e) {
    e.preventDefault();
    $('html, body').animate({
        scrollTop: '860'
    }, 1800, "easeInOutQuint");
});

$('.top').click(function(e) {
    e.preventDefault();
    $('html, body').animate({
        scrollTop: '0px'
    }, 1500, "easeInOutQuint");
});

$('.distributor').click(function(e) {
    e.preventDefault();
  $('#distributor').animate({
    height: 'show'
    }, 1200,  "easeInOutCirc");
});

$('.top').click(function(e) {
    e.preventDefault();
  $('#distributor')
    .animate({
        height: 'hide'
        }, 590, "easeInQuint");

    });
});

Anything I'm doing wrong? Is there a way to reset the events after the forms have been hidden again? Any help/insight/resources would be greatly appreciated!

Will

Answer 1

Without a fiddle, I cannot say for sure, but I suggest that you use some console.log calls to print out to start and end scrollTop values. I have had some issues like this before, and they are typically due to issues with scrolling the wrong amounts and restoring to the wrong amounts.

The likely case, which you might not notice, is that when you scroll back up, your scrollTop value goes beyond 0 to some negative number. The window cannot scroll to a negative scrollTop, so it would have to "wait" until the value returns to 0 before it can begin the visible animation.

NOTE: It is possible for this to happen, even if you have set the scrollTop to zero, as this may not have been its initial position. When I said "negative", what I meant was "negative relative to the initial position".

Update: Take a look at this page. It also links to a corresponding SO post and tells you how to smoothly scroll to the top. I have used modified versions of the code before and, though it is very similar to what you have, the SO posts might give you a little extra insight.

I would also change your animate functions to only call on the "html" element, instead of both the "html" element and the "body" element.