jQueryページ/ iframeの一番下までスクロール

jqueryを使用して、iframeまたはページの一番下まで右にスクロールするにはどうすればよいですか？

素敵な遅いアニメーションスクロールが必要な場合は、href="#bottom"このアンカーを使用すると、下にスクロールされます。

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

セレクタは自由に変更してください。

scrollTop（）は、スクロール可能領域からビューに表示されないピクセル数を返すため、次のように指定します。

$(document).height()

実際にはページの下部をオーバーシュートします。スクロールがページの下部で実際に「停止」するには、ブラウザウィンドウの現在の高さを引く必要があります。これにより、必要に応じてイージングを使用できるようになるため、次のようになります。

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

例えば：

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

このスレッドが私の特定のニーズのために私のためにうまくいかなかった後（特定の要素、私の場合はテキストエリア内でスクロール）、私はこのことを大いに超えて発見しました、これはこの議論を読んでいる他の誰かに役立つかもしれません：

planetcloudの代替

私はすでにjQueryオブジェクトのキャッシュバージョンを持っているため（myPanel以下のコードのjQueryオブジェクトです）、イベントハンドラーに追加したコードは次のとおりです。

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

（ベンに感謝）

ページ全体の下部にジャンプする（瞬時にスクロールする）単純な関数。組み込みのを使用し.scrollTop()ます。私はこれを個々のページ要素で動作するように適応させることを試みていません。

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

これは私のために働きました：

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

アニメーションを気にしない場合は、要素の高さを取得する必要はありません。少なくとも、私が試したすべてのブラウザscrollTopで、最大値よりも大きい数値を指定した場合は、一番下までスクロールします。だからそれを可能な限り最大の数を与える：

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

スクロールバーのある要素ではなく、ページをスクロールしたい場合はmyScrollingElement、 'body、html'に等しくします。

これをいくつかの場所で行う必要があるので、次のように、それをより便利にするためにすばやく簡単なjQuery関数を作成しました。

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

だから私はbuncho 'のものを追加するときにこれを行うことができます：

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

以前の回答で言及されたスクリプト、たとえば：

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

または

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

CSSのタグにプロパティが設定されている場合、Chrome では機能せず、Safari で ジャンプします。理解するのに1時間近くかかりました。htmloverflow: auto;

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

このコードを使用して、新しいメッセージが到着したときにチャットをスクロールします。