Question

当调用函数时，页面向上滚动到顶部，但是只要设置了动画时间，我就需要等待，以便能够再次向下滚动。例如，如果我说

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

它让我等待一段时间才能再次向下滚动，但如果我写了

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

它向上滚动的速度更快，但我可以立即再次向下滚动！我如何使用800（因此动画效果更酷）但是又避免等待再次向下滚动？

$(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

您可以使用以下代码停止任何正在进行的动画。

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

编辑：只有在人类触发滚动时动画才会停止。这是一个工作小提琴https://jsfiddle.net/sjp3xngo/4/

Answer 2

你需要在tbdob.Text = form1.Dedob;的回调函数中编写一个setTimeout函数（将窗口滚动到顶部的函数），以便将BACK向下滚动到其早期位置。工作小提琴here。

.animate()

$(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;
}

ScrollTop（）函数，滚动时间

2 个答案: