Wie scrollt das Fenster mit JQuery $ .scrollTo() -Funktion

Question

Ich versuche, 100px jedes Mal nach unten scrollen, wenn der Benutzer in der Nähe des oberen Rand des Dokuments.

Ich habe die Funktion ausgeführt, wenn der Benutzer nahe an den Anfang des Dokuments, aber die .scrollTo Funktion funktioniert nicht.

ich eine Warnung nach setzen und vor um zu prüfen, ob es tatsächlich die Linie oder nicht, dass es gestoppt und nur der erste Alarm losgeht, hier ist der Code:

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

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

Answer 1

Wenn es nicht funktioniert, warum versuchen Sie nicht jQuery scrollTop Methode verwenden?

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

Wenn Sie schauen, glatt scrollen können Sie grundlegende verwenden Javascript SetTimeout/setInterval-Funktion, um es über eine bestimmte Zeit in Schritten von 1px zu machen blättern.

Answer 2

Sieht so aus, als ob die Syntax etwas falsch ist ... Ich gehe davon aus, dass Sie versuchen, in 800ms 100px herunterzuscrollen, wenn dies der Fall ist (mit scrollTo 1.4.1):

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

Answer 3

jQuery unterstützt jetzt scrollTop als Animationsvariable.

Sie müssen nicht länger setTimeout/setInterval, um reibungslos zu scrollen.

Answer 4

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

Answer 5

Eigentlich etwas wie

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

funktioniert gut und Polsterung. Sie können auch die Margen leicht unterstützen - für die Fertigstellung 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'); 
} 

Answer 6

Um das html vs body Problem zu bekommen, fest ich dies nicht die CSS direkt Animieren sondern window.scrollTo(); auf jedem Schritt Aufruf:

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

Dies funktioniert gut ohne Refresh-Fehler, da JavaScript über Browser verwendet wird.

Weitere Informationen darüber, was Sie mit der Animate-Funktion von jQuery tun können, finden Sie unter http://james.padolsey.com/javascript/fun-with-jquerys-animate/.