Est-il possible d'animer scrollTop avec jQuery?
Je veux en douceur, faites défiler vers le bas. Je ne veux pas à avoir à écrire une fonction pour que - surtout si jQuery possède déjà un.
Vous devez vous connecter pour publier un commentaire.
Je veux en douceur, faites défiler vers le bas. Je ne veux pas à avoir à écrire une fonction pour que - surtout si jQuery possède déjà un.
Vous devez vous connecter pour publier un commentaire.
Vous pouvez simplement utiliser
.animate()
lascrollTop
propriété, comme ceci:html
etbody
? Il y a un aperçu ici: stackoverflow.com/questions/2123690/..., mais ce n'est pas une réponse complète.html
uniquement (pas debody
) fonctionne dans IE, Firefox & Chrome. jsfiddle.net/gNgRj/1 . La version de webkit corrigé cela?<html>
aoverflow-x:hidden;
ce animez ne fonctionnera pas. (Peut ne pas fonctionner pouroverflow-y:hidden
, etoverflow:hidden
, mais je n'ai pas testé.body
travaillé dans google Chrome, comme de plus tôt cette année, mais maintenant, il doit êtrehtml
.html
œuvres pour Chrome et Firefox.body
œuvres de Bord.De Nick répondre à de grandes œuvres. Soyez prudent lors de la spécification complète() la fonction à l'intérieur de la animate() appeler parce qu'il sera exécuté deux fois depuis, vous avez deux sélecteurs déclaré html (et le corps).
Voici comment vous pouvez éviter la double fonction de rappel.
die()
fonction avantlive()
appel de fonction. Cela garantit que votrelive()
gestionnaire sera appelé qu'une seule fois.Nick la réponse de grandes œuvres et les paramètres par défaut sont bien, mais vous permet de mieux contrôler le défilement en remplissant l'ensemble des paramètres facultatifs.
voici à quoi il ressemble dans l'API:
de sorte que vous pourriez faire quelque chose comme ceci:
ici est le jQuery .animer la fonction de l'api page: http://api.jquery.com/animate/
J'ai ce que je crois est une meilleure solution que la
$('html, body')
hack.Ce n'est pas un one-liner, mais le problème que j'ai eu avec
$('html, body')
est que si vous vous connectez$(window).scrollTop()
au cours de l'animation, vous allez voir que la valeur des sauts dans tous les sens, parfois par des centaines de pixels (bien que je n'ai pas vu quelque chose comme ce qui se passe visuellement). J'avais besoin de la valeur d'être prévisible, de sorte que je pouvais annuler l'animation si l'utilisateur saisit la barre de défilement ou tourné la molette de la souris pendant le défilement automatique.Ici est une fonction qui permet d'animer le défilement en douceur:
Ci-dessous est une version plus complexe que d'annuler l'animation sur l'interaction de l'utilisateur, ainsi que refiring jusqu'à ce que la valeur cible est atteinte, ce qui est utile lorsque vous tentez de définir la scrollTop instantanément (par exemple, simplement en appelant
$(window).scrollTop(1000)
— dans mon expérience, cela ne fonctionne environ 50% du temps.)Comme Kita mentionné il y a un problème avec plusieurs rappels de cuisson lorsque vous animez sur les deux 'html' et 'corps'. Au lieu d'animer à la fois et le blocage ultérieur des rappels, je préfère utiliser certaines caractéristiques de base de la détection et seulement animer la scrollTop propriété d'un objet unique.
La accepté de répondre sur cet autre fil donne un aperçu de l'objet dont l'scrollTop bien, nous devrions essayer d'animer: pageYOffset de Défilement et de l'Animation dans IE8
Mise à JOUR - - -
Au-dessus de la tentative, de la fonction de détection échoue. Semble comme il n'y a pas une ligne de chemin de faire comme webkit type de navigateurs pageYOffset propriété renvoie toujours zéro quand il y a un doctype.
Au lieu de cela, j'ai trouvé un moyen d'utiliser une promesse de faire un simple rappel à chaque fois que l'animation s'exécute.
J'ai eu des problèmes où l'animation était toujours en commençant par le haut de la page après un rafraichissement de la page dans les autres exemples.
J'ai fixé ce, par le pas de l'animation de la css directement, mais plutôt d'appeler
window.scrollTo();
sur chaque étape:Cette obtient également autour de la
html
vsbody
la question de l'aide de la croix-navigateur JavaScript.Ont un coup d'oeil à http://james.padolsey.com/javascript/fun-with-jquerys-animate/ pour plus d'informations sur ce que vous pouvez faire avec la fonction animate de jQuery.
Vous pouvez utiliser le jQuery animation pour faire défiler la page avec une durée déterminée:
où 1024px est le livre de décalage et 5000 est la durée d'animations dans l'ordre de la milliseconde.
$("html, body").animate({scrollTop: 1024}, 5000);
fonctionne également.Essayer le scrollTo plugin.
Si vous souhaitez déplacer vers le bas à la fin de la page (si vous n'avez pas besoin de faire défiler vers le bas) , vous pouvez utiliser:
Mais si vous voulez vraiment ajouter un peu d'animation pendant le défilement, vous pouvez essayer de mon plugin simple (AnimateScroll) qui prend actuellement en charge plus de 30 assouplissement des styles
la croix-navigateur de code est:
il est sans animation mais fonctionne partout