Question

点击屏幕底部带有^字符的小div后，正常启动滚动动画。但是在多次执行此操作后，当您尝试向下滚动时，它会持续一段时间（与您点击div的次数成比例）。

有人可以告诉我它为什么会这样做吗？

HTML：

<!DOCTYPE html>
<html>
  <head>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
  </head>
  <body>
   <div id="test">Where to go</div>
   <div id="goToTop">^</div>
  </body>
</html>

JS：

$(window).scroll(function(){
  var st = $(window).scrollTop();
  var timeout = setTimeout(function(){
    var currentScrollTop = $(window).scrollTop();
    if(st == currentScrollTop){
      var yPosInAbsolute = window.innerHeight - 100;
      $('#goToTop').css({'top': st + yPosInAbsolute, 'right': 100});

      $('#goToTop').show();
      $('#goToTop').click(function(){
        $('html,body').animate({scrollTop: $('#test').offset().top - 50}, 2000);
        clearTimeout(timeout);
      });
    }else{
      $('#goToTop').hide();
      clearTimeout(timeout);
    }
  }, 2000);
});

DEMO

Answer 1

您需要jQuery的.stop()功能。这是因为动画调用已排队。

$('html,body').stop(true, false).animate(...)

See

在scrollTop Animation之后滚动将不起作用

1 个答案: