So scrollen Sie mit der Funktion JQuery $ .scrollTo () durch das Fenster

Ich versuche jedes Mal, wenn der Benutzer sich dem oberen Rand des Dokuments nähert, um 100 Pixel nach unten zu scrollen.

Ich habe die Funktion ausgeführt, wenn der Benutzer sich dem oberen Rand des Dokuments nähert, aber die .scrollTo-Funktion funktioniert nicht.

Ich habe nach und vor eine Warnung eingefügt, um zu überprüfen, ob tatsächlich die Leitung sie gestoppt hat oder nicht, und nur die erste Warnung wird ausgelöst. Hier ist der Code:

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

Ich weiß, dass ich die JQuery-Seite richtig verlinkt habe, weil ich viele andere JQuery-Funktionen verwende und sie alle gut funktionieren. Ich habe auch versucht, das 'px' von oben zu entfernen, und es scheint keinen Unterschied zu machen.

Wenn es nicht funktioniert, warum versuchen Sie es nicht mit der scrollTop-Methode von jQuery?

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

Wenn Sie reibungslos scrollen möchten, können Sie die grundlegende Javascript-Funktion setTimeout / setInterval verwenden, um einen Bildlauf in Schritten von 1 Pixel über einen festgelegten Zeitraum durchzuführen.

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

jQuery unterstützt jetzt scrollTop als Animationsvariable.

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

Sie müssen setTimeout / setInterval nicht mehr einstellen, um reibungslos zu scrollen.

Um das htmlvs- bodyProblem zu umgehen , habe ich dies behoben, indem ich das CSS nicht direkt animierte, sondern window.scrollTo();jeden Schritt aufrief :

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

Dies funktioniert gut ohne Aktualisierungsprobleme, da es browserübergreifendes JavaScript verwendet.

Werfen Sie einen Blick auf http://james.padolsey.com/javascript/fun-with-jquerys-animate/ für weitere Informationen darüber , was Sie mit jQuery animieren Funktion tun können.

Sieht so aus, als hätten Sie eine etwas falsche Syntax ... Ich gehe davon aus, dass Sie basierend auf Ihrem Code versuchen, 100px in 800 ms nach unten zu scrollen. Wenn ja, funktioniert dies (mit scrollTo 1.4.1):

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

Eigentlich so etwas wie

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

funktioniert gut und unterstützt die Polsterung. Sie können Ränder auch problemlos unterstützen - zur Vervollständigung siehe unten

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