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

Question

J'essaie de faire défiler 100 pixels chaque fois que l'utilisateur arrive en haut du document.

La fonction s’exécute lorsque l’utilisateur se rapproche du haut du document, mais la fonction .scrollTo ne fonctionne pas.

Je mets une alerte après et avant pour vérifier si c'est la ligne qui l'arrêtait et si 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 connectée car j’utilise beaucoup d’autres fonctions jQuery et elles fonctionnent toutes bien. J'ai également essayé d'enlever le «px» d'en haut et cela ne semble pas faire de différence.

Answer 1

Si cela ne fonctionne pas, pourquoi ne pas utiliser la méthode scrollTop de jQuery?

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

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

Answer 2

$('html, body').animate({scrollTop: $("#page").offset().top}, 2000);

Answer 3

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.

Answer 4

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

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

Cela fonctionne sans problème de rafraîchissement, car il utilise du JavaScript inter-navigateurs.

Découvrez 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.

Answer 5

On dirait que la syntaxe est légèrement fausse ... J'imagine que, d'après votre code, vous essayez de faire défiler 100 pixels vers le bas en 800 ms. Si c'est le cas, cela fonctionne (avec scrollTo 1.4.1):

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

Answer 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 supportera le rembourrage. Vous pouvez également gérer facilement les marges - À remplir 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');
}