jQuery Gulir ke bawah halaman / iframe

224

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

Adam
sumber

Jawaban:

360

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.

Mark Ursino
sumber
48
Ini berfungsi di Firefox 3.5.7 tetapi tidak di Chrome 4.0.295.0. Berikut ini berfungsi di Chrome: $ ('html, body'). Animate ({scrollTop: $ (document) .height ()}, 'slow');
Tom
1
@ Tom, saya tidak bisa menemukan perbedaan antara solusi Anda dan Markus!
Muhammad Gelbana
4
@MuhammadGelbana periksa tanggal edit. Tampaknya Mark memperbarui jawabannya untuk memasukkan perbaikan Tom.
Paul Parker
Sebenarnya tidak perlu untuk mendapatkan tinggi elemen: stackoverflow.com/a/44578849/1450294
Michael Scheper
210

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"
);
Tom Bates
sumber
29
Ini harus menjadi jawaban yang diterima, Tom benar-benar benar, jawaban yang diterima tidak berfungsi dengan baik karena gulir akan tiba-tiba berhenti alih-alih memproses akhir pelonggaran.
Christian
33
Catatan: easeOutQuintmemerlukan plugin, jQuery sendiri hanya memiliki lineardan swing.
newenglander
Bung ini barang bagus! Terima kasih. bahkan melakukan ini dengan 'swing' bukannya 'easyoutquint' menunjukkan perbedaan nyata '.
Jesse Head
Tidak yakin apakah ini bentuk yang buruk, tetapi saya mengedit jawaban yang diterima untuk menambahkan pointer ke jawaban ini. Jika ya, maka seseorang dapat mengembalikannya.
xaxxon
Solusi ini hanya berfungsi jika halaman ditafsirkan dalam mode yang sesuai standar. Misalnya, jika Anda tidak memasukkan <!DOCTYPE html>Chrome pada, Chrome akan mengembalikan nilai yang sama persis untuk tinggi jendela dan dokumen, dalam hal ini $(document).height()-$(window).height()akan selalu kembali 0. Lihat di sini: stackoverflow.com/questions/12103208/…
VKK
35

Sebagai contoh:

$('html, body').scrollTop($(document).height());
Tatu Ulmanen
sumber
Sepertinya saya tidak bisa melakukannya. Tidak melakukan apa-apa sama sekali.
Adam
@adam Versi jQuery apa yang Anda gunakan?
Sonny Boy
14

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)

Greg Pettit
sumber
1
Bekerja untuk saya dengan div:var d = $('#mydiv'); d.scrollTop (d[0].scrollHeight - d.height ());
gregn3
Apakah Anda benar-benar harus mengerjakan matematika? stackoverflow.com/a/44578849/1450294
Michael Scheper
4

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() );
}
Rory O'Kane
sumber
2
Saya tidak tahu mengapa, tetapi ini tidak berhasil untuk saya di Firefox 26.0, dan akan bergulir ke atas ketika fungsi ini dijalankan. Masalah ini diatasi dengan mengatakan$(document).scrollTop($(document).height());
Jack
2

Yang ini bekerja untuk saya:

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

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();
Michael Scheper
sumber
0

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.

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

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

Александр Лиссов
sumber
Harap sertakan beberapa penjelasan untuk kode Anda, terutama ketika Anda menyalin dari basis kode Anda sendiri, menggunakan kelas-kelas CSS yang tidak relevan untuk orang lain;)
Bruno Monteiro
Ambil blok apa pun dengan bilah gulir;) atau seluruh dokumen.
Александр Лиссов