ScrollTop（）函数，滚动时间

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

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

来源

2017-04-01 Masood

您可以添加，将800毫秒之后被调用做任何你想在那个时候的setTimeout（FUNC（）{}，800）。 – fmacdee

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

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

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

来源

2017-04-01 18:04:01 lhavCoder

你需要写.animate()，以降低回其早先的立场，滚动（其中滚动窗口顶部的一个）的回调函数内部setTimeout功能。工作小提琴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(){ 
 
     \t setTimeout(function(){ 
 
      \t  $('html, body').animate({ scrollTop: last_scroll }, duration_ms); 
 
      \t }, 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>

来源

2017-04-01 18:41:47

ScrollTop（）函数，滚动时间

回答

相关问题