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

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

Answer 2

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 souhaitez un défilement fluide, vous pouvez utiliser la fonction javascript setTimeout/setInterval de base pour faire défiler les images par incréments de 1px pendant une durée déterminée.

Answer 3

JQuery prend désormais en charge scrollTop comme variable d'animation.

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

Il n'est plus nécessaire de définir un délai d'attente ou un intervalle de temps pour obtenir un défilement fluide.

Answer 4

En fait, quelque chose comme

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

fonctionne bien et prend en charge le remplissage. Vous pouvez également prendre en charge les marges facilement - pour 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');
}

Answer 5

Il semble que vous ayez une syntaxe légèrement erronée... Je suppose, d'après votre code, que vous essayez de faire défiler 100px vers le bas en 800ms, si c'est le cas, cela fonctionne (en utilisant scrollTo 1.4.1) :

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