web-dev-qa-db-ja.com

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

Jqueryを使ってiframeやページの一番下までスクロールするにはどうすればいいですか？

jqueryscrollscrollto
213
Adam

href="#bottom"が付いているアンカーのために、ニースの遅いアニメーションスクロールが欲しいなら、これはあなたを下にスクロールします：

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

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

344
Mark Ursino

scrollTop（）は、スクロール可能領域から見えないように隠されているピクセル数を返します。

$(document).height()

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

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

例えば：

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

このスレッドが私の特定のニーズ（私の場合はテキストエリアの中でスクロールする）のために私のためにうまくいかなかった後、私はこれをはるかに超えて発見しました。

planetcloudの代替

私はすでにjQueryオブジェクトのキャッシュバージョンを持っているので（以下のコードのmyPanelはjQueryオブジェクトです）、私が自分のイベントハンドラに追加したコードは単にこれです：

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

（ありがとうベン）

14
Greg Pettit

ページ全体の一番下にジャンプする（即座にスクロールする）簡単な機能。組み込みの .scrollTop() を使います。個々のページ要素を処理するようにこれを調整しようとはしていません。

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

これは私のために働いた：

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

アニメーションを気にしないのであれば、要素の高さを取得する必要はありません。少なくとも私が試したすべてのブラウザで、もしあなたが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();
1
Michael Scheper

次のような、以前の回答で述べたスクリプト

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

または

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

動作しませんChromeで飛び込みSafari場合CSSの= htmlタグにoverflow: auto;プロパティが設定されています。把握するのに1時間近くかかりました。

0
Ilia Rostovtsev