Menganimasikan scroll ke ID saat halaman dimuat

123

Im tring untuk menganimasikan scroll ke ID tertentu saat pemuatan halaman. Saya telah melakukan banyak penelitian dan menemukan ini:

$("html, body").animate({ scrollTop: $('#title1').height() }, 1000);

tapi ini sepertinya mulai dari ID dan beranimasi ke bagian atas halaman?

HTML (yang berada di tengah halaman) adalah:

<h2 id="title1">Title here</h2>
jquery scroll jquery-animate Adi
sumber
1
Ini bukan jawaban yang banyak, tapi saya sangat merekomendasikan plugin "scrollTo" Ariel Flesler; ia memiliki banyak fitur untuk menggeser halaman, dan beberapa ekstensi ke plugin untuk kasus umum (misalnya, Anda mungkin menemukan plugin "LocalScroll" -nya berguna untuk menggulir ke href tautan jika ada di halaman yang sama). Anda bisa mendapatkan pluginnya di sini: flesler.blogspot.com/2007/10/jqueryscrollto.html
Faisal

Jawaban:

327

Anda hanya menggulir tinggi elemen Anda. offset () mengembalikan koordinat elemen relatif terhadap dokumen, dan topparam akan memberi Anda jarak elemen dalam piksel di sepanjang sumbu y:

$("html, body").animate({ scrollTop: $('#title1').offset().top }, 1000);

Dan Anda juga dapat menambahkan penundaan untuk itu:

$("html, body").delay(2000).animate({scrollTop: $('#title1').offset().top }, 2000);
BumbleB2na
sumber
1
Ada apa dengan pengguliran otomatis yang membuat saya berkata "WOW COOL !!"? Mungkin karena kesederhanaan solusi Anda.
theblang
Saya perlu menggulir elemen ke tampilan saat pemuatan halaman, tetapi memiliki dua masalah: a) menggunakan "html, body" memberikan dua callback (satu untuk setiap elemen yang cocok). b) Itu tergantung pada browser mana dari body atau html yang berfungsi. Jadi saya membuat intisari yang dapat Anda adaptasikan untuk digunakan dalam proyek Anda untuk memastikan scroll-to-view berfungsi di browser "apa pun" dan bahwa Anda hanya akan mendapatkan satu callback saat animasi berakhir. gist.github.com/netsi1964/4ddffe1ae14e05220d25
Netsi1964
2
Ini tidak benar. Anda benar-benar harus mempertimbangkan posisi gulir tubuh atau elemen saat ini yang kami coba scroll. Dengan mengingat hal itu Anda akan menambahkan posisi gulir saat ini bodyke offset().topposisi elemen yang kita inginkan dalam tampilan, Jumlah yang dihasilkan adalah nilai yang ingin kita gulir. $('html, body').animate({ scrollTop: ($('html, body').scrollTop() + $('#title1').offset().top) }, 1000);
mattdevio
@magreenberg sudahkah Anda mencobanya? Jika posisi gulir saat ini berada di atas nilai 0 maka yang Anda sarankan mungkin tidak berfungsi. Misalkan kontainer yang dapat digulir adalah 1000 piksel dan posisi gulir saat ini pada 1000. Katakanlah elemen yang Anda gulirkan berada di tengah vertikal pada 500. Saya pikir apa yang Anda sarankan akan memberitahukannya untuk menggulir ke 1500 , Baik?
BumbleB2na
@ BumbleB2na .offset().topakan memberi Anda angka negatif dalam hal ini. Dan ini benar-benar hanya berfungsi untuk bodydan htmlkarena offset().topakan memberi Anda offset atas dokumen, bukan induk pengguliran yang dimaksudkan.
mattdevio
12

Solusi javascript murni dengan fungsi scrollIntoView () :

document.getElementById('title1').scrollIntoView({block: 'start', behavior: 'smooth'});
<h2 id="title1">Some title</h2>
Luaskan cuplikan

Parameter PS 'smooth' sekarang berfungsi dari Chrome 61 seperti yang disebutkan julien_c di komentar.

Vladimir Vovk
sumber
1
Bekerja sekarang (dari Chrome 61)
julien_c
Pastikan untuk memeriksa kompatibilitas browser. Mulai 10/2018 IE (11), Edge dan Safari mendukung "scrollIntoView" tetapi bukan opsi "smooth".
metal_jacke1
Ftw JS murni. Terima kasih untuk cuplikan itu! Halus seperti krim mentega ganda
jean d'arme
3

Ada plugin jquery untuk ini. Ini menggulung dokumen ke elemen tertentu, sehingga akan sempurna di tengah viewport. Ini juga mendukung easing animasi sehingga efek gulir akan terlihat sangat halus. Cek link ini .

Dalam kasus Anda, kodenya adalah

$("#title1").animatedScroll({easing: "easeOutExpo"});
Eugene Tiurin
sumber
"Ini juga mendukung kemudahan animasi sehingga efek gulir akan terlihat super mulus" Sayangnya, itu tidak berlaku. Jika komputer lambat karena suatu alasan, komputer terus melompat tanpa benar-benar bergerak dengan benar.
brunoais
Pengguliran halus membutuhkan banyak piksel untuk dihitung. Tentu "komputer" yang lambat (lebih banyak GPU) tidak dapat melakukan ini, tetapi karena ALU tidak cukup. Jadi secara umum dia benar. Dan lib bergulir sangat mudah.
Roland
1

coba dengan kode berikut. buat elemen dengan nama kelas page-scroll dan pertahankan nama id ke hreflink yang sesuai

$('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: ($($anchor.attr('href')).offset().top - 50)
        }, 1250, 'easeInOutExpo');
        event.preventDefault();
    });
Akhil
sumber
-3

untuk Scroll sederhana, gunakan gaya berikut

tinggi: 200px; overflow: gulir;

dan gunakan kelas gaya ini yang div atau bagian mana yang ingin Anda tampilkan gulir

mm
sumber