jQuery Gulir ke bawah halaman / iframe

Bagaimana cara menggunakan jquery untuk menggulir ke bawah hingga ke bawah iframe atau halaman?

Jika Anda ingin gulir animasi lambat yang bagus, untuk setiap jangkar dengan href="#bottom"ini akan menggulir Anda ke bawah:

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

Jangan ragu untuk mengganti pemilih.

scrollTop () mengembalikan jumlah piksel yang disembunyikan dari tampilan dari area yang dapat digulir, jadi berikan:

$(document).height()

akan benar-benar melampaui bagian bawah halaman. Agar scroll benar-benar 'berhenti' di bagian bawah halaman, ketinggian jendela browser saat ini perlu dikurangi. Ini akan memungkinkan penggunaan pelonggaran jika diperlukan, sehingga menjadi:

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

Sebagai contoh:

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

Setelah utas ini tidak berhasil bagi saya untuk kebutuhan spesifik saya (menggulir ke dalam elemen tertentu, dalam kasus saya sebuah textarea), saya menemukan ini di luar yang luar biasa, yang dapat terbukti bermanfaat bagi orang lain yang membaca diskusi ini:

Alternatif di planetcloud

Karena saya sudah memiliki versi cache dari objek jQuery saya ( myPanelkode di bawah ini adalah objek jQuery), kode yang saya tambahkan ke event handler saya hanyalah ini:

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

(terima kasih Ben)

Fungsi sederhana yang melompat (langsung menggulir) ke bagian bawah seluruh halaman. Menggunakan built-in .scrollTop(). Saya belum mencoba menyesuaikan ini agar berfungsi dengan elemen halaman individual.

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

Yang ini bekerja untuk saya:

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

Jika Anda tidak peduli dengan animasi, maka Anda tidak harus mendapatkan ketinggian elemen. Paling tidak di semua browser yang saya coba, jika Anda memberikan scrollTopangka yang lebih besar dari maksimum, itu hanya akan gulir ke bawah. Jadi berikan jumlah terbesar yang mungkin:

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

Jika Anda ingin menggulir halaman, daripada beberapa elemen dengan scrollbar, buat saja myScrollingElement sama dengan 'body, html'.

Karena saya perlu melakukan ini di beberapa tempat, saya telah menulis fungsi jQuery yang cepat dan kotor untuk membuatnya lebih nyaman, seperti ini:

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

Jadi saya bisa melakukan ini ketika saya menambahkan beberapa hal:

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

Skrip yang disebutkan dalam jawaban sebelumnya, seperti:

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

atau

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

tidak akan berfungsi di Chrome dan akan gelisah di Safari jika html tag di CSS memiliki overflow: auto;properti yang disetel. Butuh hampir satu jam untuk mencari tahu.

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

Saya menggunakan kode ini untuk menggulir obrolan ketika pesan baru tiba.