Le défilement ne fonctionne pas après l'animation scrollTop

Après avoir cliqué sur la petite div avec le caractère ^ en bas de l'écran, l'animation de défilement est lancée normalement. Mais après l'avoir fait plusieurs fois et quand vous essayez de faire défiler vers le bas, il va rester debout pendant un certain temps (proportionnel au nombre de fois que vous avez cliqué sur la div). Est-ce que quelqu'un peut me dire pourquoi ça fait ça?Le défilement ne fonctionne pas après l'animation scrollTop

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); 
});

Le DEMO

Source

2014-07-18 Xlander

que certains temps est les piles de temps Timeouts et animation. – frikinside

Merci pour votre aide. :) – Xlander

[Fiddle Demo] (http://jsfiddle.net/GopsAB/sCaLr/1/) Mon essai va gaspiller le coz de réponse rapide. Quoi qu'il en soit, essayez-le :) –

Vous avez besoin de la fonction jQuery .stop(). C'est parce que les appels d'animation sont mis en file d'attente.

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

See

Source

2014-07-18 11:14:37 gorpacrate

Merci beaucoup! :) – Xlander

c'est encore buggé. ça ne marche pas tout le temps. J'ai des carreaux de divs l'un à côté de l'autre, en mobile c'est un sur chaque ligne. lorsque vous cliquez sur l'un il se développe et fait défiler vers le haut de la div ouvert. Lorsque vous cliquez sur plusieurs cases, il continue à faire glisser la page jusqu'au dernier clic. Tu ne peux pas rester au même endroit. Je suppose que je shuold résoudre cela différemment – Amjo

@Amjo deuxième paramètre de la méthode .stop() est sur l'arrêt de l'animation en cours. Essayez de lire les documents, il y a un lien dans ma réponse. Essayez .stop (true, true) - il devrait immédiatement sauter à la destination finale de l'animation. Si vous devez vous arrêter où vous êtes au moment du clic, vous devez probablement vous souvenir de la position actuelle du défilement au moment du clic et, après que jquery saute à la position finale de l'animation (via requestAnimationFrame ou timeout zéro), utilisez la position mémorisée pour mettre à jour manuellement le défilement. Devrait fonctionner de manière transparente (sans sauts visibles), mais nécessite des expérimentations. – gorpacrate

Le défilement ne fonctionne pas après l'animation scrollTop

Répondre

Questions connexes