ScrollTop() function, scroll time

Question

When function is called, the page scrolls up to the top, but I need to wait for as long as the animate time is set to, to be able to scroll down again. for example if I say

$('html, body').animate({ scrollTop: 0 }, 800);

It makes me wait for a while to be able to scroll down again, but if I write

$('html, body').animate({ scrollTop: 0 }, 10);

It scrolls up a lot faster, but I will be able to immediately scroll down again! How can I use 800 (so the animate acts cooler) but avoid waiting for scrolling down again?

$(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
        $('.goToTop').fadeIn();
    } else {
        $('.goToTop').fadeOut();
    }
    $('#goToTop').click(function () {
        $('html, body').animate({ scrollTop: 0 }, 800);
        return false;
    });
});

Answer 1

you can stop any ongoing animation using the following code .

$( 'html,body' ).stop();

edit: the animation has to stop only if the scroll was triggered by a human. Heres a working fiddle https://jsfiddle.net/sjp3xngo/4/

Answer 2

You need to write a setTimeout function inside the callback function of .animate() (the one which scrolls the window to top) in order to scroll down BACK to its earlier position. Working fiddle here .

 $(document).ready(function(){ $(window).scroll(function () { if ($(this).scrollTop() > 100) { $('#goToTop').fadeIn(); } else { $('#goToTop').fadeOut(); } }); var duration_ms = 800; $('#goToTop').click(function () { var last_scroll = $(window).scrollTop(); $('html, body').animate({ scrollTop: 0 }, duration_ms, function(){ setTimeout(function(){ $('html, body').animate({ scrollTop: last_scroll }, duration_ms); }, duration_ms); }); }); }); 

 #goToTop{ cursor: pointer; display: none; position: fixed; bottom: 15px; right: 15px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <pre> a b c d q w e r t y u i o p a s d f g h j k l z x c v b n m <span id="goToTop">go to top</span> </pre>