jQuery Gulir ke bawah halaman

196

Setelah halaman saya selesai memuat. Saya ingin jQUery gulir dengan baik ke bagian bawah halaman, menjiwai dengan cepat, bukan snap / sentakan.

Apakah saya memerlukan plugin seperti ScrollToitu? atau apakah itu dibangun ke jQuery bagaimana?

jquery jquery-plugins AnApprentice
sumber

Jawaban:

416

Anda hanya dapat menghidupkan untuk menggulir ke bawah halaman dengan menghidupkan scrollTopproperti, tidak diperlukan plugin, seperti ini:

$(window).load(function() {
  $("html, body").animate({ scrollTop: $(document).height() }, 1000);
});

Perhatikan penggunaan window.onload(saat gambar dimuat ... yang menempati ketinggian) daripada document.ready.

Agar benar secara teknis, Anda perlu mengurangi ketinggian jendela, tetapi yang di atas berfungsi:

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

Untuk menggulir ke ID tertentu, gunakan .scrollTop(), seperti ini:

$("html, body").animate({ scrollTop: $("#myID").scrollTop() }, 1000);
Nick Craver
sumber
2
Masalah lain, adalah ketika tampaknya sudah selesai, dan kemudian pengguna mencoba untuk naik, untuk sedikit itu terkunci, dan membuat efek yang sangat menyentak, mencegah pengguna dari menggulung ke atas
AnApprentice
1
@AnApprentice - Itu karena itu terjadi dengan cepat (secara default 400 ms), saya sarankan hanya gulir cepat untuk mengatasi masalah itu.
Nick Craver
3
Kuncinya adalah karena jaraknya mati. Ini menjiwai melewati animasi yang terlihat.
Josiah Ruddell
27
@NickCraver - dengan versi terbaru dari jQuery .scrollTop () tampaknya tidak berfungsi untuk menggulir ke ID tertentu; dengan .offset (). top harus bekerja: $("html, body").animate({ scrollTop: $("#myID").offset().top }, 1000);
Paolo Gibellini
3
Jawaban ini perlu diedit. $(document).height()terlalu besar nilainya untuk scrollTopproperti, Anda bisa melihat bahwa dengan pelonggaran. Saya pikir $(document).height() - window.innerHeightharus baik-baik saja.
silvenon
22

sesuatu seperti ini:

var $target = $('html,body'); 
$target.animate({scrollTop: $target.height()}, 1000);
Josiah Ruddell
sumber
Saya mencoba memperbarui target ke .write-comment dan tidak berhasil. Mungkin karena itu disuntikkan ke halaman?
AnApprentice
16 
$('html,body').animate({ scrollTop: 9999 }, 'slow');

Sesederhana ini, tinggi halaman 9999 ... rentang besar sehingga bisa mencapai ke bawah.

Alin Razvan
sumber
1
Ini tidak sempurna, seperti dalam beberapa kasus, bahkan jika jarang, mungkin ada halaman lebih lama dari itu, khususnya halaman yang memuat konten tak terbatas secara dinamis. Ini akan menghentikan gulir di tengah jalan.
Akhil Gupta
13

Anda bisa mencoba ini 

var scroll=$('#scroll');
scroll.animate({scrollTop: scroll.prop("scrollHeight")});
Sarath Ak
sumber
10 
$("div").scrollTop(1000);

Bekerja untukku. Gulir ke bawah.

f123
sumber
13
Tidak jika halaman Anda lebih panjang dari 1000px.
Volomike
4

Skrip yang disebutkan dalam jawaban sebelumnya, seperti:

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

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
3

Dengan menggunakan 'document.body.clientHeight' Anda bisa mendapatkan ketinggian elemen tubuh yang terlihat 

$('html, body').animate({
    scrollTop: $("#particularDivision").offset().top - document.body.clientHeight + $("#particularDivision").height()
}, 1000);

ini muncul di id 'specificDivision'

Anbu
sumber
1

Untuk jQuery 3, Silakan ubah

$ (window) .load (function () {$ ("html, body"). animate ({scrollTop: $ (document) .height ()}, 1000);})

untuk:

$ (window) .on ("load", function (e) {$ ("html, body"). animate ({scrollTop: $ (document) .height ()}, 1000);})

Adnan Tahir
sumber
1 
function scrollToBottom() {
     $("#mContainer").animate({ scrollTop: $("#mContainer")[0].scrollHeight }, 1000);
}

Ini adalah solusi yang bekerja dari saya dan Anda tahu, saya yakin

Roshan Madusanka
sumber
0

js

var el = document.getElementById("el");
el.scrollTop = el.scrollHeight - el.scrollTop;
codeskyblue
sumber
Meskipun kode ini dapat membantu menyelesaikan masalah, kode ini tidak menjelaskan mengapa dan / atau bagaimana ia menjawab pertanyaan. Memberikan konteks tambahan ini akan secara signifikan meningkatkan nilai pendidikan jangka panjangnya. Harap edit jawaban Anda untuk menambahkan penjelasan, termasuk batasan dan asumsi apa yang berlaku.
Toby Speight
0 
$('#pagedwn').bind("click", function () {
        $('html, body').animate({ scrollTop:3031 },"fast");
        return false;
});

Solusi ini bekerja untuk saya. Ini bekerja di Halaman Gulir ke Bawah dengan cepat.

vikram venkatesh
sumber
0 
var pixelFromTop = 500;     
$('html, body').animate({ scrollTop: pixelFromTop  }, 1);

Jadi ketika halaman dibuka secara otomatis gulir ke bawah setelah 1 milidetik

WapShivam
sumber