jQuery Scrollen Zum Ende der Seite

196

Nachdem meine Seite fertig geladen ist. Ich möchte, dass jQUery schön zum Ende der Seite scrollt und schnell animiert, kein Schnappschuss.

Benötige ich dafür ein Plugin ScrollTo? oder ist das wie in jQuery eingebaut?

jquery jquery-plugins Ein Lehrling
quelle

Antworten:

416

Sie können einfach animieren, um die Seite nach unten zu scrollen, indem Sie die scrollTopEigenschaft animieren. Es ist kein Plugin erforderlich, wie folgt:

$(window).load(function() {
  $("html, body").animate({ scrollTop: $(document).height() }, 1000);
});

Beachten Sie die Verwendung von window.onload(wenn Bilder geladen werden ... die Höhe einnehmen) anstatt document.ready.

Um technisch korrekt zu sein, müssen Sie die Höhe des Fensters subtrahieren, aber das Obige funktioniert:

$("html, body").animate({ scrollTop: $(document).height()-$(window).height() });

Um zu einer bestimmten ID zu scrollen, verwenden Sie .scrollTop()Folgendes:

$("html, body").animate({ scrollTop: $("#myID").scrollTop() }, 1000);
Nick Craver
quelle
2
Ein weiteres Problem ist, wenn es fertig zu sein scheint und der Benutzer versucht, nach oben zu scrollen, für ein wenig ist es gesperrt und macht einen sehr ruckartigen Effekt, der den Benutzer daran hindert, nach oben zu scrollen
AnApprentice
1
@AnApprentice - Da dies schnell geschieht (standardmäßig 400 ms), würde ich nur einen kurzen Bildlauf empfehlen, um dieses Problem zu beheben.
Nick Craver
3
Das Schloss ist, weil die Entfernung aus ist. Es wird über die sichtbare Animation hinaus animiert.
Josiah Ruddell
27
@NickCraver - mit der neuesten Version von jQuery .scrollTop () scheint nicht zu funktionieren, um zu einer bestimmten ID zu scrollen; mit .offset (). top sollte funktionieren: $("html, body").animate({ scrollTop: $("#myID").offset().top }, 1000);
Paolo Gibellini
3
Diese Antwort muss bearbeitet werden. $(document).height()ist ein zu großer Wert für scrollTopImmobilien, das merkt man an der Lockerung. Ich denke $(document).height() - window.innerHeightsollte ok sein.
Silvenon
22

etwas wie das:

var $target = $('html,body'); 
$target.animate({scrollTop: $target.height()}, 1000);
Josiah Ruddell
quelle
Ich habe versucht, das Ziel auf .write-comment zu aktualisieren, aber es hat nicht funktioniert. Vielleicht, weil das in die Seite injiziert wird?
AnApprentice
16 
$('html,body').animate({ scrollTop: 9999 }, 'slow');

So einfach ist das, 9999 Seitenhöhe ... großer Bereich, so dass es bis zum Boden reichen kann.

Alin Razvan
quelle
1
Dies ist nicht perfekt, da in einigen Fällen, auch wenn dies selten vorkommt, möglicherweise längere Seiten vorhanden sind, insbesondere Seiten, auf denen unbegrenzt viele Inhalte dynamisch geladen werden. Dadurch wird der Bildlauf auf halbem Weg gestoppt.
Akhil Gupta
13

Sie können dies versuchen 

var scroll=$('#scroll');
scroll.animate({scrollTop: scroll.prop("scrollHeight")});
Sarath Ak
quelle
10 
$("div").scrollTop(1000);

Funktioniert bei mir. Scrollt nach unten.

f123
quelle
13
Nicht, wenn Ihre Seite länger als 1000px ist.
Volomike
4

Die in früheren Antworten erwähnten Skripte wie:

$("body, html").animate({
    scrollTop: $(document).height()
}, 400)

funktioniert nicht in Chrome und ist in Safari nervös, falls für das html Tag in CSS die overflow: auto;Eigenschaft festgelegt wurde. Ich brauchte fast eine Stunde, um das herauszufinden.

Ilia Rostovtsev
quelle
3

Mit 'document.body.clientHeight' können Sie die sichtbare Höhe der Körperelemente ermitteln 

$('html, body').animate({
    scrollTop: $("#particularDivision").offset().top - document.body.clientHeight + $("#particularDivision").height()
}, 1000);

Dies scrollt bei der ID 'bestimmteDivision'

Anbu
quelle
1

Für jQuery 3 ändern Sie bitte

$ (Fenster) .load (function () {$ ("html, body"). animate ({scrollTop: $ (document) .height ()}, 1000);})

zu:

$ (window) .on ("load", Funktion (e) {$ ("html, body"). animate ({scrollTop: $ (document) .height ()}, 1000);})

Adnan Tahir
quelle
1 
function scrollToBottom() {
     $("#mContainer").animate({ scrollTop: $("#mContainer")[0].scrollHeight }, 1000);
}

Dies ist die Lösungsarbeit von mir und Sie finden, ich bin sicher

Roshan Madusanka
quelle
0

js

var el = document.getElementById("el");
el.scrollTop = el.scrollHeight - el.scrollTop;
Codeskyblue
quelle
Obwohl dieser Code zur Lösung des Problems beitragen kann, erklärt er nicht, warum und / oder wie er die Frage beantwortet. Die Bereitstellung dieses zusätzlichen Kontextes würde den langfristigen Bildungswert erheblich verbessern. Bitte bearbeiten Sie Ihre Antwort, um eine Erklärung hinzuzufügen, einschließlich der Einschränkungen und Annahmen.
Toby Speight
0 
$('#pagedwn').bind("click", function () {
        $('html, body').animate({ scrollTop:3031 },"fast");
        return false;
});

Diese Lösung hat bei mir funktioniert. Es funktioniert in Page Scroll Down schnell.

vikram venkatesh
quelle
0 
var pixelFromTop = 500;     
$('html, body').animate({ scrollTop: pixelFromTop  }, 1);

Wenn die Seite geöffnet wird, wird sie nach 1 Millisekunde automatisch nach unten gescrollt

WapShivam
quelle