web-dev-qa-db-fra.com

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

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

La fonction s'exécute lorsque l'utilisateur se rapproche 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 qui l'arrêtait et que 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.

javascriptjqueryscrollscrollto
95
Matt Doak

Si cela ne fonctionne pas, pourquoi ne pas 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 de base javascript setTimeout/setInterval pour le faire défiler par incréments de 1 px sur une durée définie.

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

jQuery supporte maintenant 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.

41
Todd

Pour résoudre le problème html vs body, j'ai résolu ce problème en n'animant pas directement le fichier 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 rafraîchissements, car il utilise du JavaScript inter-navigateurs.

Jetez un œil à http://james.padolsey.com/javascript/fun-with-jquerys-animate/ pour plus d'informations sur ce que vous pouvez faire avec la fonction animer de jQuery.

15
complistic

On dirait que la syntaxe est légèrement fausse ... Je suppose, en fonction de votre code, que 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' });
7
Alconja

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 - À compléter 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');
}
6
Tim