javascript - scrollTop 动画后滚动将不起作用

标签 javascript jquery html css

点击屏幕下方带有^字符的小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

最佳答案

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

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

See

关于javascript - scrollTop 动画后滚动将不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24823446/

相关文章:

javascript - $(#id).on() 不适用于动态创建的内容

javascript - 拖放和提交文件以上传

javascript - 如何在长混合 html 内容中自动分页

Javascript:如何判断 <span> 是否超过 2 行?

javascript - 如何在 phonegap android 中安全地存储 json 数据?

javascript - 为什么我收到错误 : TypeError: Cannot read property 'map' of undefined?

javascript - 在 dom 中注入(inject) facebook 像素时,jQuery 附加到 vanilla javascript 问题

javascript - 如何将 jquery 插件附加到动态创建的文本框

javascript - 将一系列数字设置为变量(Javascript)

带 Bootstrap 轮播的 PHP