Нажмите несколько раз на кнопку делает страницу заблокирована

Question

Когда вы нажимаете на кнопку, страница должна прокручиваться вниз, чтобы div с id = "myTarget".

вот мой 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); 
}); 
}); 

Моя проблема заключается в том, что при нажатии на несколько раз на кнопку, страница прокрутки вниз. После этого вы не сможете прокручивать вверх. Можно ли остановить событие click во время перемещения страницы?

JsFiddle

Answer 1

И если вы остановите анимацию, когда пользователь колесико мыши?

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

}); 
var page = $("html, body"); 
page.on("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove", function(){ 
     page.stop(); 
}); 

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. Таким образом, вам нужно дождаться, пока все анимации, которые были начаты, умирают, прежде чем вы сможете прокручивать резервные копии.

Вещь, которые вы можете сделать об этой проблеме

1. сделать продолжительность анимации меньше
2. вызовов stop() на элементах вы оживляющие перед созданием новой анимации
3. вызова stop() если окно прокручивается. Это решение может быть проблематичным, если у вас когда-либо был тег body, делающий другие анимации. Во всяком случае, первых двух решений должно быть достаточно.

Первое должно быть само за себя, а второй очень легко:

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

Вы также только должны оживить элемент тела (а не элемента 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; 
       } 
      ); 
     } 
    }); 
}); 

Ваша проблема заключается в том, что она продолжает пытаться прокручивать вниз, даже если вы уже вниз.