Cara Menggulir ke Elemen Menggunakan JavaScript

Saat menjelajahi halaman web, menggulir ke suatu elemen membuat pengguna tetap fokus dengan menarik perhatian mereka untuk waktu yang lama. Fungsionalitas ini dapat diterapkan ketika pengguna perlu menggulir menggunakan satu klik saja atau, dalam kasus pengujian otomatisasi, untuk memeriksa konten yang ditambahkan di bagian bawah halaman secara instan. Dalam skenario seperti itu, menggulir ke elemen dalam JavaScript menambahkan fungsionalitas untuk diterapkan dengan satu klik tanpa banyak interaksi pengguna dan menghemat waktu.

Manual ini akan memandu Anda untuk menggulir ke elemen menggunakan JavaScript.

Bagaimana Menggulir ke Elemen Menggunakan JavaScript?

Untuk menggulir ke elemen menggunakan JavaScript, Anda dapat menggunakan:

• • “ gulir ke tampilan() ' metode
  • “ menggulir() ' metode
  • “ gulirKe() ' metode

Pendekatan-pendekatan tersebut akan diilustrasikan satu per satu!

Metode 1: Gulir ke Elemen dalam JavaScript Menggunakan Metode scrollIntoView()

' gulir ke tampilan() ” metode menggulir elemen ke area yang terlihat dari Model Objek Dokumen (DOM). Metode ini dapat diterapkan untuk mendapatkan HTML yang ditentukan dan menerapkan metode tertentu padanya dengan bantuan event onclick.

Sintaksis

Dalam sintaks yang diberikan, “ meluruskan ” menunjukkan jenis perataan.

Contoh

Dalam contoh berikut, tambahkan judul berikut menggunakan '

” tag:

< h2 > Klik tombol untuk menggulir ke elemen. h2 >

Sekarang, buat tombol dengan ' klik ” kejadian yang memanggil fungsi “ gulirElemen() :

< tombol klik = 'gulunganElemen ()' > Elemen Gulir tombol >
< br >

Setelah itu, tentukan sumber gambar dan id-nya untuk di-scroll:

< gambar src = 'ulasan.PNG' Indo = 'div' >

Terakhir, tentukan fungsi bernama “ gulirElemen() ” yang akan mengambil elemen yang diperlukan menggunakan “ document.getElementById() ” dan terapkan metode scrollIntoView() di atasnya untuk menggulir gambar:

fungsi gulirElemen ( ) {
var elemen = document.getElementById ( 'div' ) ;
element.scrollIntoView ( ) ;
}

Kode CSS

Pada kode CSS, terapkan dimensi berikut untuk menyesuaikan ukuran gambar dengan mengacu pada id gambar “ div ”:

#div{
tinggi: 800 piksel;
lebar: 1200px;
melimpah: otomatis;
}

Output yang sesuai akan menjadi:

Metode 2: Gulir ke Elemen dalam JavaScript Menggunakan Metode window.scroll()

' jendela.scroll() ” metode menggulir jendela sesuai dengan nilai koordinat dalam dokumen. Metode ini dapat diterapkan untuk mengambil id gambar, mengatur koordinatnya menggunakan fungsi, dan menggulir gambar yang ditentukan.

Sintaksis

window.scroll ( koordinat x, koordinat y )

Dalam sintaks di atas, “ koordinat-x ” mengacu pada koordinat X, dan “ y-koord ” menunjukkan koordinat Y.

Contoh berikut menjelaskan konsep yang dinyatakan.

Contoh

Ulangi langkah yang sama untuk menambahkan judul, membuat tombol, menerapkan acara onclick dan menentukan sumber gambar dengan id-nya:

< h2 > Klik tombol untuk menggulir ke elemen. h2 >
< tombol klik = 'gulunganElemen ()' > Elemen Gulir tombol >
< br >
< gambar src = 'gambar.PNG' Indo = 'div' >

Selanjutnya, tentukan fungsi bernama “ gulirElemen() ”. Di sini, kita akan menyesuaikan koordinat menggunakan ' jendela.scroll() ” dengan mengakses fungsi bernama “ Posisi() ” dan menerapkannya pada elemen gambar yang diambil:

fungsi gulirElemen ( ) {
window.scroll ( 0 , Posisi ( document.getElementById ( 'div' ) ) ) ;
}

Setelah itu, tentukan fungsi bernama “ Posisi() ” mengambil variabel obj sebagai argumennya. Juga, terapkan ' offsetInduk ”, yang akan mengakses ancestor terdekat yang tidak memiliki posisi statis dan mengembalikannya. Kemudian, tambahkan nilai teratas saat ini yang diinisialisasi dengan bantuan ' offsetAtas ” properti yang akan mengembalikan posisi teratas sehubungan dengan induk (offsetParent) dan mengembalikan nilai “ atasan saat ini ” ketika kondisi yang ditambahkan dievaluasi sebagai benar:

fungsi Posisi ( obj ) {
dimana saat ini atas = 0 ;
jika ( obj.offsetParent ) {
melakukan {
currenttop += obj.offsetTop;
} ketika ( ( obj = obj.offsetParent ) ) ;
kembali [ saat ini ] ;
}
}

Terakhir, gaya wadah yang dibuat sesuai dengan kebutuhan Anda:

#div{
tinggi: 1000 piksel;
lebar: 1000 piksel;
melimpah: otomatis;
}

Keluaran

Metode 3: Gulir ke Elemen dalam JavaScript Menggunakan Metode scrollTo()

' gulirKe() ” metode menggulir dokumen yang ditentukan ke koordinat yang ditetapkan. Metode ini juga dapat diterapkan untuk mendapatkan elemen dengan menggunakan id-nya dan melakukan fungsionalitas yang diperlukan untuk menggulir gambar tertentu di DOM.

Sintaksis

window.scrollTo ( x dan y )

Di Sini, ' x ' dan ' kamu ” arahkan ke koordinat x dan y.

Lihat contoh berikut.

Contoh

Pertama, ulangi langkah-langkah yang dibahas di atas untuk menambahkan heading, tombol dengan event onclick, dan gambar sebagai berikut:

< h2 > Klik tombol untuk menggulir ke elemen. h2 >
< tombol klik = 'gulunganElemen ()' > Elemen Gulir tombol >
< br >
< gambar src = 'gambar.JPG' Indo = 'div' >

Selanjutnya, tentukan fungsi bernama “ gulirElemen() ” dan atur scroll dengan memanggil metode Position() dalam metode scrollTo():

fungsi gulirElemen ( ) {
window.scrollTo ( 0 , Posisi ( document.getElementById ( 'div' ) ) ) ;
}

Terakhir, tentukan fungsi bernama Position() dan terapkan juga langkah-langkah yang dibahas di atas untuk menyetel koordinat gambar yang ditentukan:

fungsi Posisi ( obj ) {
dimana saat ini atas = 0 ;
jika ( obj.offsetParent ) {
melakukan {
currenttop += obj.offsetTop;
} ketika ( ( obj = obj.offsetParent ) ) ;
kembali [ saat ini ] ;
}
}

Keluaran

Kami telah membahas semua metode mudah untuk menggulir ke elemen menggunakan JavaScript.

Kesimpulan

Untuk menggulir ke elemen dalam JavaScript, gunakan tombol “ gulir ke tampilan() ” untuk mengakses elemen dan menerapkan fungsionalitas yang ditentukan, metode “ jendela.scroll() ” untuk mengambil elemen, mengatur koordinatnya menggunakan suatu fungsi, dan menggulir gambar, atau menggunakan “ gulirKe() ” untuk mengambil elemen dan menggulirnya sesuai dengan itu. Blog ini mendemonstrasikan konsep untuk menggulir ke elemen menggunakan JavaScript.