JQuery Scrollen Sie nach unten auf Seite/Iframe

Question

Wie benutze ich JQuery, um bis zum Ende eines Iframe oder einer Seite zu scrollen?

Answer 1

Wenn Sie eine schöne langsame Animationsrolle möchten, für einen Anker mit href="#bottom" Dies wird Sie nach unten scrollen:

$("a[href='#bottom']").click(function() {
  $("html, body").animate({ scrollTop: $(document).height() }, "slow");
  return false;
});

Fühlen Sie sich frei, den Selektor zu ändern.

Answer 2

scrolltop () gibt die Anzahl der Pixel zurück, die aus dem scrollbaren Bereich aus der Sicht versteckt sind. Geben Sie sie also an:

$(document).height()

Wird tatsächlich den unteren Teil der Seite überschreiten. Damit die Schriftrolle am unteren Rand der Seite tatsächlich "stoppen", muss die aktuelle Höhe des Browserfensters abgezogen werden. Dies ermöglicht die Verwendung der Lockerung bei Bedarf, sodass es:

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

Answer 3

Zum Beispiel:

$('html, body').scrollTop($(document).height());

Answer 4

Nachdem dieser Thread für mich nicht für mein bestimmtes Bedürfnis geklappt hat (in einem bestimmten Element scrollen, in meinem Fall ein Textbereich), fand ich dies im Großen Beurteil heraus, was sich für eine andere Person als hilfreich erweisen könnte, die diese Diskussion liest:

Alternative zu PlanetCloud

Da hatte ich bereits eine zwischengespeicherte Version meines jQuery -Objekts (die myPanel Im folgenden Code befindet sich das JQuery -Objekt), der Code, den ich meinem Ereignishandler hinzugefügt habe, war einfach Folgendes:

myPanel.scrollTop(myPanel[0].scrollHeight - myPanel.height());

(Danke Ben)

Answer 5

Eine einfache Funktion, die auf die gesamte Seite springt (sofort scrollen). Es verwendet das eingebaute .scrollTop(). Ich habe nicht versucht, dies an die Arbeit mit einzelnen Seitenelementen anzupassen.

function jumpToPageBottom() {
    $('html, body').scrollTop( $(document).height() - $(window).height() );
}

Answer 6

Dieser hat für mich funktioniert:

var elem = $('#box');
if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) {
  // We're at the bottom.
}

Answer 7

Wenn Sie sich nicht für Animation interessieren, müssen Sie nicht die Höhe des Elements erhalten. Zumindest in allen Browsern, die ich ausprobiert habe, wenn Sie geben scrollTop Eine Zahl, die größer als das Maximum ist, scrollt einfach nach unten. Geben Sie ihm also die größte Anzahl möglich:

$(myScrollingElement).scrollTop(Number.MAX_SAFE_INTEGER);

Wenn Sie die Seite scrollen möchten, anstatt mit einer Scrollbar, machen Sie einfach ein Element myScrollingElement Gleich wie "Körper, html".

Da ich dies an mehreren Stellen tun muss, habe ich eine schnelle und schmutzige JQuery -Funktion geschrieben, um sie bequemer zu machen:

(function($) {
  $.fn.scrollToBottom = function() {
    return this.each(function (i, element) {
      $(element).scrollTop(Number.MAX_SAFE_INTEGER);
    });
  };
}(jQuery));

Also kann ich das tun, wenn ich ein Buncho 'Zeug angehängte:

$(myScrollingElement).append(lotsOfHtml).scrollToBottom();

Answer 8

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

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

oder

$(window).scrollTop($(document).height());

wird nicht funktionieren in Chrom und wird nervös sein Safari im Falle html Tag in CSS hat overflow: auto; Eigenschaftssatz. Ich brauchte fast eine Stunde, um herauszufinden.