Comment faire défiler la fenêtre à l'aide de la fonction JQuery $ .scrollTo ()

98

J'essaie de faire défiler 100px à chaque fois que l'utilisateur se rapproche du haut du document.

J'ai la fonction qui s'exécute lorsque l'utilisateur s'approche du haut du document, mais la fonction .scrollTo ne fonctionne pas.

J'ai mis une alerte après et avant pour vérifier si c'était réellement la ligne qui l'arrêtait ou non et seule la première alerte se déclenche, voici le code:

alert("starting");
$.scrollTo({ top: '+=100px', left: '+=0px' }, 800);
alert("finished");

Je sais que la page jquery est correctement liée car j'utilise de nombreuses autres fonctions jquery et elles fonctionnent toutes très bien. J'ai également essayé de supprimer le «px» d'en haut et cela ne semble pas faire de différence.

javascript jquery scroll scrollto
la source
3
Jquery lui-même fonctionne correctement, mais êtes-vous sûr que le plugin scrollTo est correctement lié? Changez l'une de ces alertes en alerte ($. ScrollTo);
Andrew

Réponses:

97

Si cela ne fonctionne pas, pourquoi n'essayez-vous pas d'utiliser la méthode scrollTop de jQuery? 

$("#id").scrollTop($("#id").scrollTop() + 100);

Si vous cherchez à faire défiler en douceur, vous pouvez utiliser la fonction javascript de base setTimeout / setInterval pour le faire défiler par incréments de 1px sur une durée définie.

Fermin
la source
8
Notez que si vous voulez faire défiler la page entière et non un élément individuel, utilisez $ ('html, body') comme Tim l' a indiqué ici. Juste $ ('body') ne fonctionnera pas dans tous les navigateurs.
i--
321 
$('html, body').animate({scrollTop: $("#page").offset().top}, 2000);
Mihai
la source
19
Je me suis souvent demandé pourquoi les gens utilisent «html, body» pour scrollTop au lieu de simplement «html». Des pensées à ce sujet?
Scott Greenfield
+1 a travaillé pour moi;) Je suis également intéressé de savoir pourquoi html, bodyau lieu de simplement html?
Kato
9
@ScottGreenfield, @Kato: je ne sais pas pourquoi, mais ce commentaire dit de ne pas inclure bodycela sur Chrome 4: stackoverflow.com/questions/1890995/...
Yuji 'Tomita' Tomita
scrollTop: 0fonctionne également très bien. Mais la durée diminue. Fonctionne bien si réglé à 1000 en vitesse
shashwat
C'est une bonne solution jusqu'à ce que vous souhaitiez ajouter une méthode complète - elle s'exécutera deux fois. La solution de @complistic est plus élégante et évitera cela.
plankguy
41

jQuery prend désormais en charge scrollTop en tant que variable d'animation.

$("#id").animate({"scrollTop": $("#id").scrollTop() + 100});

Vous n'avez plus besoin de setTimeout / setInterval pour faire défiler en douceur.

Todd
la source
Vous avez des erreurs de syntaxe - votre fermeture {. Sinon, c'est un bon point.
Joshua
1
Doit-il l'être à la $("#id").offset().topplace?
codeulike
15

Pour contourner le problème de htmlvs body, j'ai résolu ce problème en n'animant pas directement le css, mais en appelant plutôt window.scrollTo();à chaque étape:

$({myScrollTop:window.pageYOffset}).animate({myScrollTop:300}, {
  duration: 600,
  easing: 'swing',
  step: function(val) {
    window.scrollTo(0, val);
  }
});

Cela fonctionne bien sans aucun problème d'actualisation car il utilise du JavaScript multi-navigateurs.

Consultez http://james.padolsey.com/javascript/fun-with-jquerys-animate/ pour plus d'informations sur ce que vous pouvez faire avec la fonction d'animation de jQuery.

compliste
la source
1
C'est génial. Je n'ai changé que window.pageYOffsetde $(window).scrollTop()et window.scrollTo(0, val)vers $(window).scrollTop(val)pour ne pas avoir à me soucier de la compatibilité du navigateur.
leftclickben
1
Je n'ai jamais pensé passer un objet à la méthode animée de jQuery comme ça. Autant d'utilisations possibles. Cette solution est géniale, merci.
Synexis
Oui, la technique est une contribution importante. Auparavant contourné les problèmes de navigateur en utilisant directement "window.scrollTo ()", mais cela ne permet pas un rappel "complet", ni une promesse. Merci @complistic pour cette solution. Aussi, mes remerciements à @leftclickben; J'ai implémenté sa variante en utilisant ".scrollTop ()". En outre, l'article "james.padolsey", par lien, est une lecture laconique et très intéressante.
IAM_AL_X
Je pense que "window.scrollTo ()" devrait être compatible avec tous les navigateurs modernes.
IAM_AL_X
7

On dirait que vous avez une syntaxe légèrement erronée ... Je suppose qu'en fonction de votre code, vous essayez de faire défiler 100 pixels vers le bas en 800 ms, si c'est le cas, cela fonctionne (en utilisant scrollTo 1.4.1):

$.scrollTo('+=100px', 800, { axis:'y' });
Alconja
la source
6

En fait quelque chose comme

function scrollTo(prop){
    $('html,body').animate({scrollTop: $("#"+prop).offset().top +
 parseInt($("#"+prop).css('padding-top'),10) },'slow');
}

fonctionnera bien et soutiendra le rembourrage. Vous pouvez également prendre en charge facilement les marges - pour la finalisation, voir ci-dessous

function scrollTo(prop){
    $('html,body').animate({scrollTop: $("#"+prop).offset().top 
+ parseInt($("#"+prop).css('padding-top'),10) 
+ parseInt($("#"+prop).css('margin-top'),10) +},'slow');
}
Tim
la source