Question

单击按钮时，页面应向下滚动到div =“myTarget”的div。

这是我的HTML：

<button class="go"> GO </button>
<div id="myTarget">
   <p>
        la lalal lalala lalala 
    </p>
</div>

和jquery：

$(function() {
  $(".go").on('click', function(event) {
     event.stopPropagation();
    $('html, body').animate({ 
        scrollTop: $("#myTarget").offset().top  }, 3000);
 });
});

我的问题是，当您点击按钮上的几次时，页面向下滚动。之后你无法向上滚动。有没有办法在页面移动时停止点击事件？

JsFiddle

Answer 1

如果您在用户鼠标滚轮时停止动画？

results.data.user.id

Demo

Answer 2

如何在按钮运行时禁用该按钮，并在动画完成后再次启用它？

$(function() {
  $(".go").on('click', function(event) {
     var $but = jQuery(this);
     event.stopPropagation();
     $but.attr("disabled", true);
    $('html, body').animate({ 
        scrollTop: $("#myTarget").offset().top  }, 3000, "linear", function(){
           $but.removeAttr("disabled");
        });
 });
});

Answer 3

问题是你的动画会被附加到html和body标签的上一个动画上。因此，您必须等待所有已经开始死亡的动画才能向上滚动。

你可以对这个问题做些什么

使动画的持续时间缩小
在创建新动画之前，在动画元素上调用stop()
如果滚动窗口，请调用stop()。如果你有身体标签做其他动画，这个解决方案可能会有问题。无论如何，前两个解决方案应该足够了。

第一个应该是自我解释的，第二个是非常容易的：

$(".go").on('click', function(event) {
    event.stopPropagation();
    $('body').stop().animate({ 
        scrollTop: $("#myTarget").offset().top  }, 500);
});

您还只需要为body元素（而不是html元素）设置动画。

JSFiddle Example

Answer 4

我认为你的意思是，如果你快速点击按钮几次它会向下滚动而不能让你向上滚动，而不是当你点击按钮，向下滚动，等待，它不起作用向上滚动“。

如果是第一种情况，你可以像这样修理它。

 $(function() {       $(".go").on('click', function(event) {
         event.stopPropagation();
           $(".go").attr("disabled", true).delay(3000).attr("disabled", false);         $('html, body').animate({ 
             scrollTop: $("#myTarget").offset().top  
}, 
3000);   
});      
});

这意味着当您单击按钮时，它将被禁用3000毫秒（动画的时间。这应该会阻止用户点击它并在动画时多次触发动画。

Answer 5

使用滚动状态，如下所示：

$(function() {
    //global var
    isScrolling = false;

    $(".go").on('click', function(event) {
        event.stopPropagation();
        if(!isScrolling) {
            isScrolling = true;

            $('html, body').animate({
                scrollTop: $("#myTarget").offset().top  }, 3000,
                //Only when it's completed (callback)
                function() {
                    isScrolling = false;
                }
            );
        }   
    });
});

你的问题是，即使你已经失败，它仍会继续向下滚动。

单击按钮几次使页面被阻止

5 个答案: