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

Question

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

J'ai la fonction d'exécution lorsque l'utilisateur se rapproche du haut du document, mais la fonction .scrollTo ne fonctionne pas.

Je mis une alerte avant et après de vérifier pour voir si elle était en fait la ligne ou non qui était arrêté et que la première alerte se éteint, voici le code:

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

Je sais que j'ai la page jquery est correctement liée car j'utilise beaucoup d'autres fonctions jquery tout au long et tout fonctionne 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 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 de base javascript setTimeout/setInterval pour le faire défiler par incréments de 1px sur une longueur de temps définie. JQuery prend désormais en charge scrollTop comme variable d'animation.

Answer 2

On dirait que vous avez la syntaxe légèrement fausse ... Je suppose en fonction de votre code que vous essayez de faire défiler 100px en 800ms, si oui, alors cela fonctionne (en utilisant scrollTo 1.4.1):

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

Answer 3

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

Vous ne devez plus setTimeout/setInterval pour faire défiler en douceur.

Answer 4

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

Answer 5

fait quelque chose comme

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

fonctionnera bien et le rembourrage de soutien. Vous pouvez également prendre en charge les marges facilement - pour l'achèvement 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 6

Pour contourner le html vs body question, je fixe ceci en n'animant le css directement, mais plutôt d'appeler window.scrollTo(); sur chaque étape:

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

Cela fonctionne bien sans aucune actualisation, car il utilise le JavaScript de plusieurs navigateurs.

Jetez un oeil à 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.