JQuery мерцает при использовании animimate-scrollTo

У меня проблема с функцией scrollTo, когда она вызывается функцией jQuery animate.

Здесь мой код:

$("#button").click(function(){
    $("body").animate({scrollTop: 1400},"slow");
});

Когда я нажимаю кнопку, мерцание появляется перед прокруткой тела. Например, я нахожусь (позиция прокрутки) 1000, и когда я нажал кнопку, произошло следующее:

  • page/image on (позиция прокрутки) появляется 1400, похоже, что я уже ушел к (позиции) 1400
  • то он снова перемещается в (положение) 1000, это происходит так быстро и выглядит как мерцание.
  • наконец, он прокручивается до 1400, как обычный свиток.

В firefox он всегда появляется, а иногда и на хроме.

Ответы

Ответ 1

У меня была такая же мерцающая проблема. Это было вызвано хеш-якорем в ссылке, которая запускает функцию. Исправлено с помощью preventDefault():

$("#button").click(function(e){
    e.preventDefault();
    $("body").animate({scrollTop: 1400},"slow");
});

Ответ 2

<a href="#" onclick="return scrollFromTop(1400, 2000);">scroll</a>

function scrollFromTop(offset, duration) {
    $('body').stop(true).animate({scrollTop: offset}, duration);
    return false;
});

имела ту же проблему... исправил ее, вернув false в обработчик кликов

Ответ 3

решил эту проблему, остановив анимацию следующим образом:

$('body,html').bind('scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove', function(e){
            if ( e.which > 0 || e.type == "mousedown" || e.type == "mousewheel" || e.type == "touchmove"){
                $("html,body").stop();
            }
        })