jQuery Scrollen Sie zum Ende der Seite / des Iframes

Wie scrolle ich mit jquery bis zum Ende eines Iframes oder einer Seite?

Wenn Sie eine schöne langsame Animation scrollen möchten, werden Sie für jeden Anker mit href="#bottom"diesem nach unten scrollen:

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

Sie können den Wahlschalter jederzeit ändern.

scrollTop () gibt die Anzahl der Pixel zurück, die im scrollbaren Bereich nicht sichtbar sind. Geben Sie also Folgendes an:

$(document).height()

überschreitet tatsächlich den unteren Rand der Seite. Damit der Bildlauf am unteren Rand der Seite tatsächlich stoppt, muss die aktuelle Höhe des Browserfensters subtrahiert werden. Dies ermöglicht die Verwendung von Lockerung, falls erforderlich, so dass:

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

Beispielsweise:

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

Nachdem dieser Thread für mich aufgrund meiner spezifischen Anforderungen (Scrollen innerhalb eines bestimmten Elements, in meinem Fall eines Textbereichs) nicht funktioniert hat, habe ich dies im Jenseits herausgefunden, was sich für andere, die diese Diskussion lesen, als hilfreich erweisen könnte:

Alternative auf planetcloud

Da ich bereits eine zwischengespeicherte Version meines jQuery-Objekts hatte (der folgende myPanelCode ist das jQuery-Objekt), war der Code, den ich meinem Ereignishandler hinzugefügt habe, einfach folgender:

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

(danke Ben)

Eine einfache Funktion, die zum Ende der gesamten Seite springt (sofort einen Bildlauf durchführt). Es verwendet die eingebaute .scrollTop(). Ich habe nicht versucht, dies an einzelne Seitenelemente anzupassen.

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

Dieser hat für mich gearbeitet:

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

Wenn Sie sich nicht für Animation interessieren, müssen Sie nicht die Höhe des Elements ermitteln. Zumindest in allen Browsern, die ich ausprobiert habe scrollTop, wird nur nach unten gescrollt, wenn Sie eine Zahl angeben, die größer als das Maximum ist. Geben Sie also die größtmögliche Anzahl an:

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

Wenn Sie die Seite anstelle eines Elements mit einer Bildlaufleiste scrollen möchten, setzen Sie einfach myScrollingElement'body, html' gleich.

Da ich dies an mehreren Stellen tun muss, habe ich eine schnelle und schmutzige jQuery-Funktion geschrieben, um es bequemer zu machen, wie folgt:

(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 paar Sachen anhänge:

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

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

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

oder

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

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 es herauszufinden.

$('.block').scrollTop($('.block')[0].scrollHeight);

Ich verwende diesen Code, um den Chat zu scrollen, wenn neue Nachrichten eintreffen.