web-dev-qa-db-fra.com

jQuery scintille lorsque vous utilisez animate-scrollTo

J'ai un problème avec la fonction scrollTo quand elle est appelée par une fonction jQuery animate.

Voici mon code: 

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

Lorsque je clique sur le bouton, le scintillement apparaît avant le défilement du corps. Par exemple, je suis sur (position de défilement) 1000, et lorsque j'ai cliqué sur le bouton, les événements suivants se sont produits:

  1. page/image sur (position de défilement) 1400 apparaît, il semble que je suis déjà passé à (position) 1400
  2. puis il se déplace à nouveau vers (position) 1000, cela se produit si vite et ressemble à un scintillement
  3. enfin il défile jusqu'à 1400 comme un parchemin normal ..

Sur firefox, il apparaît toujours, et parfois sur chrome également.

jqueryhtmlcross-browser
27
gondai yosuke

J'ai eu le même problème de scintillement. Cela était dû à l'ancrage de hachage dans le lien qui déclenche la fonction. Corrigé avec preventDefault ():

$("#button").click(function(e){
    e.preventDefault();
    $("body").animate({scrollTop: 1400},"slow");
});
77
cleay
<a href="#" onclick="return scrollFromTop(1400, 2000);">scroll</a>

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

eu le même problème ... résolu en renvoyant false sur le gestionnaire de clics

7
ggzone

a résolu ce problème en arrêtant l'animation comme ceci:

$('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();
            }
        })

trouvé ici: Jquery .animate () arrête le défilement lorsque l'utilisateur fait défiler manuellement?

1
cutme