javascript - Click-triggered scrollTop takes random amount of time to fire -

i have comment section automatically scrolls view when scroll (using jquery scrolltop), , button scrolls when click it. first scrolling action runs perfectly, second scrolling action takes seemingly random amount of time occur after button pressed.

a live demonstration can found here: www.rouvou.com/kanyewest. go down comment section, , scroll fire first jquery scroll. click "back" button fire second scroll. might work instantly first few times try it, if enough, should delayed eventually.

html

<div id="comment-section">   <div id="comment-background-up">back</div>   <div id="good_comments"><!--content--></div>     <div id="bad_comments"><!--content--></div> </div> 

jquery

$("#good_comments").scroll(function() {   $('html, body').animate({       scrolltop: $("#good_comments").offset().top   }, 700);   $("#comment-background-up").fadein(200); }); $("#bad_comments").scroll(function() {   $('html, body').animate({       scrolltop: $("#bad_comments").offset().top   }, 700);   $("#comment-background-up").fadein(200); }); $("#comment-background-up").click(function() {   $('html, body').animate({       scrolltop: $("#randomajax").offset().top   }, 700);   $(this).fadeout(200); }); 

does know causing delay?

i suppose happening because jquery daisy-chains animations. , initiate animation on every scroll. scroll, more 700ms animations "pile up", hence go animation waiting them finish.

it best update code avoid chained scrolltop animations on body.

however, fix using jquery's stop function. i.e.:

$("#comment-background-up").click(function() {   $('html, body').stop(true, true).animate({       scrolltop: $("#randomajax").offset().top   }, 700);   $(this).fadeout(200); });