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

98

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.

3

Jquery selbst funktioniert einwandfrei, aber sind Sie sicher, dass das scrollTo-Plugin richtig verlinkt ist? Ändern Sie eine dieser Warnungen in Warnung ($. ScrollTo).

— Andrew

97

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.

— Fermin
quelle

8

Hinweis: Wenn Sie die gesamte Seite und nicht ein einzelnes Element scrollen möchten, verwenden Sie $ ('html, body'), genau wie Tim es hier gezeigt hat. Nur $ ('body') funktioniert nicht in allen Browsern.

— i--

321

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

— Mihai
quelle

19

Ich habe mich oft gefragt, warum Leute 'html, body' für scrollTop anstelle von 'html' verwenden. Irgendwelche Gedanken dazu?

— Scott Greenfield

+1 hat für mich gearbeitet;) Ich bin auch interessiert zu wissen warum warum html, bodystatt nur html?

— Kato

9

@ScottGreenfield, @Kato: Ich weiß nicht warum, aber dieser Kommentar besagt body, dass dies in Chrome 4 nicht enthalten ist: stackoverflow.com/questions/1890995/…

— Yuji 'Tomita' Tomita

scrollTop: 0funktioniert auch gut. Aber die Dauer sinkt. Funktioniert gut, wenn 1000 in Geschwindigkeit eingestellt ist

— Shashwat

Dies ist eine gute Lösung, bis Sie eine vollständige Methode hinzufügen möchten - sie wird zweimal ausgeführt. Die Lösung von @complistic ist eleganter und wird dies verhindern.

— Plankguy

41

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.

— Todd
quelle

Ich habe einige Syntaxfehler - es fehlt Ihr Abschluss {. Ansonsten ist dies ein guter Punkt.

— Joshua

1

Sollte es $("#id").offset().topstattdessen sein?

— Codeulike

15

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.

— komplistisch
quelle

1

Das ist brilliant. Ich habe nur window.pageYOffsetzu $(window).scrollTop()und window.scrollTo(0, val)zu gewechselt , $(window).scrollTop(val)damit ich mir keine Sorgen um die Browserkompatibilität machen muss.

— leftclickben

1

Ich hätte nie gedacht, ein Objekt so an jQuerys Animationsmethode zu übergeben. So viele Verwendungsmöglichkeiten. Diese Lösung ist großartig, danke.

— Synexis

Ja, Technik ist ein bedeutender Beitrag. Bisher wurden Browserprobleme durch die direkte Verwendung von "window.scrollTo ()" umgangen, aber dies ermöglicht weder einen "vollständigen" Rückruf noch ein Versprechen. Vielen Dank an @complistic für diese Lösung. Auch mein Dank geht an @leftclickben; Ich habe seine Variation mit ".scrollTop ()" implementiert. Auch der Artikel "james.padolsey" pro Link ist eine knappe, sehr lohnende Lektüre.

— IAM_AL_X

Ich denke, dass "window.scrollTo ()" mit allen modernen Browsern kompatibel sein sollte.

— IAM_AL_X

7

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' });

— Alconja
quelle

6

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');
}

— Tim
quelle