Comment faire défiler la fenêtre en utilisant la fonction JQuery $.scrollTo()

Question

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

La fonction 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 bien la ligne ou non qui l'arrêtait 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 parfaitement. J'ai également essayé de supprimer le "px" ci-dessus, mais cela ne semble pas faire de différence.

Answer 1

Je trouve que scrollto n'ajoute pas à l'historique du navigateur, et il n'y a aucun moyen documenté de contrôler l'historique à partir de cette seule méthode. Ainsi, bien qu'elle soit utile pour ajuster la présentation de la page, elle semble légèrement défectueuse pour le déplacement vers des emplacements d'ancrage nommés (ou des équivalents actuellement approuvés) sur des pages de documentation où l'utilisateur veut se déplacer en avant et en arrière dans la page pour faire défiler les cibles. Bien sûr, il existe d'autres applications pour lesquelles il est très bon.

Answer 2

Pour contourner le html vs 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 problème d'actualisation, car il s'agit de JavaScript multi-navigateurs.

Jetez un coup d'œil à 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.