Cara Tatal ke Elemen Menggunakan JavaScript

Semasa melayari halaman web, menatal ke elemen memastikan pengguna fokus dengan menarik perhatian mereka untuk tempoh yang lama. Fungsi ini boleh digunakan apabila pengguna perlu menatal menggunakan satu klik sahaja atau, dalam kes ujian automasi, untuk menyemak kandungan tambahan di bahagian bawah halaman serta-merta. Dalam senario sedemikian, menatal ke elemen dalam JavaScript menambah kefungsian untuk digunakan dengan satu klik tanpa banyak interaksi pengguna dan menjimatkan masa.

Manual ini akan membimbing anda untuk menatal ke elemen menggunakan JavaScript.

Bagaimana untuk Tatal ke Elemen Menggunakan JavaScript?

Untuk menatal ke elemen menggunakan JavaScript, anda boleh menggunakan:

• • “ scrollIntoView() ” kaedah
  • “ tatal() ” kaedah
  • “ tatalKe() ” kaedah

Pendekatan yang disebutkan akan digambarkan satu persatu!

Kaedah 1: Tatal ke Elemen dalam JavaScript Menggunakan Kaedah scrollIntoView().

' scrollIntoView() ” kaedah menatal elemen ke dalam kawasan kelihatan Model Objek Dokumen(DOM). Kaedah ini boleh digunakan untuk mendapatkan HTML yang ditentukan dan menggunakan kaedah tertentu padanya dengan bantuan acara onclick.

Sintaks

Dalam sintaks yang diberikan, ' selaraskan ” menunjukkan jenis penjajaran.

Contoh

Dalam contoh berikut, tambahkan tajuk berikut menggunakan '

” tag:

< h2 > Klik butang untuk menatal ke elemen. h2 >

Sekarang, buat butang dengan ' onclick 'peristiwa yang menggunakan fungsi' scrollElement() :

< butang onclick = 'scrollElement()' > Elemen Tatal butang >
< br >

Selepas itu, nyatakan sumber imej dan idnya untuk ditatal:

< imej src = 'ulas.PNG' ID = 'div' >

Akhir sekali, tentukan fungsi bernama ' scrollElement() ” yang akan mengambil elemen yang diperlukan menggunakan “ document.getElementById() ” dan gunakan kaedah scrollIntoView() padanya untuk menatal imej:

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

Kod CSS

Dalam kod CSS, gunakan dimensi berikut untuk melaraskan saiz imej dengan merujuk kepada id imej “ div ”:

#div{
ketinggian: 800px;
lebar: 1200px;
limpahan: auto;
}

Output yang sepadan ialah:

Kaedah 2: Tatal ke Elemen dalam JavaScript Menggunakan Kaedah window.scroll().

' window.scroll() ” kaedah menatal tetingkap mengikut nilai koordinat dalam dokumen. Kaedah ini boleh dilaksanakan untuk mengambil id imej, menetapkan koordinatnya menggunakan fungsi, dan menatal imej yang ditentukan.

Sintaks

tetingkap.skrol ( koordinat x, koordinat y )

Dalam sintaks di atas, ' koordinat x ' merujuk kepada koordinat X, dan ' y-coordinat ” menunjukkan koordinat Y.

Contoh berikut menerangkan konsep yang dinyatakan.

Contoh

Ulangi langkah yang sama untuk menambah tajuk, buat butang, gunakan acara onclick dan tentukan sumber imej dengan idnya:

< h2 > Klik butang untuk menatal ke elemen. h2 >
< butang onclick = 'scrollElement()' > Elemen Tatal butang >
< br >
< imej src = 'imej.PNG' ID = 'div' >

Seterusnya, tentukan fungsi bernama ' scrollElement() ”. Di sini, kami akan melaraskan koordinat menggunakan ' window.scroll() ' kaedah dengan mengakses fungsi bernama ' jawatan() ” dan menerapkannya pada elemen imej yang diambil:

fungsi scrollElement ( ) {
tetingkap.skrol ( 0 , Kedudukan ( document.getElementById ( 'div' ) ) ) ;
}

Selepas itu, tentukan fungsi bernama ' jawatan() ” mengambil obj pembolehubah sebagai hujahnya. Juga, gunakan ' offsetParent ” harta, yang akan mengakses moyang terdekat yang tidak mempunyai kedudukan statik dan mengembalikannya. Kemudian, naikkan nilai teratas semasa yang dimulakan dengan bantuan ' offsetTop ” harta yang akan mengembalikan kedudukan teratas berkenaan dengan induk(offsetParent) dan mengembalikan nilai “ atas semasa ” apabila syarat tambahan dinilai sebagai benar:

fungsi kedudukan ( obj ) {
di mana currenttop = 0 ;
jika ( obj.offsetParent ) {
buat {
currenttop += obj.offsetTop;
} sementara ( ( obj = obj.offsetParent ) ) ;
kembali [ atas semasa ] ;
}
}

Akhir sekali, gayakan bekas yang dibuat mengikut keperluan anda:

#div{
ketinggian: 1000px;
lebar: 1000px;
limpahan: auto;
}

Pengeluaran

Kaedah 3: Tatal ke Elemen dalam JavaScript Menggunakan Kaedah scrollTo().

' tatalKe() ” kaedah menatal dokumen yang ditentukan ke koordinat yang ditetapkan. Kaedah ini juga boleh dilaksanakan untuk mendapatkan elemen dengan menggunakan idnya dan melaksanakan fungsi yang diperlukan untuk menatal imej tertentu pada DOM.

Sintaks

window.scrollTo ( x dan y )

Di sini, ' x ” dan “ Y ” tunjuk kepada koordinat x dan y.

Sila lihat contoh berikut.

Contoh

Mula-mula, ulangi langkah yang dibincangkan di atas untuk menambah tajuk, butang dengan acara onclick dan imej seperti berikut:

< h2 > Klik butang untuk menatal ke elemen. h2 >
< butang onclick = 'scrollElement()' > Elemen Tatal butang >
< br >
< img src = 'imej.JPG' ID = 'div' >

Seterusnya, tentukan fungsi bernama ' scrollElement() ” dan tetapkan tatal dengan menggunakan kaedah Position() dalam kaedah scrollTo():

fungsi scrollElement ( ) {
window.scrollTo ( 0 , Kedudukan ( document.getElementById ( 'div' ) ) ) ;
}

Terakhir, tentukan fungsi bernama Position() dan gunakan langkah yang dibincangkan di atas untuk menetapkan koordinat imej yang ditentukan:

fungsi kedudukan ( obj ) {
di mana currenttop = 0 ;
jika ( obj.offsetParent ) {
buat {
currenttop += obj.offsetTop;
} sementara ( ( obj = obj.offsetParent ) ) ;
kembali [ atas semasa ] ;
}
}

Pengeluaran

Kami telah membincangkan semua kaedah mudah untuk menatal ke elemen menggunakan JavaScript.

Kesimpulan

Untuk menatal ke elemen dalam JavaScript, gunakan ' scrollIntoView() ' kaedah untuk mengakses elemen dan menggunakan fungsi yang ditentukan, ' window.scroll() kaedah untuk mengambil elemen, menetapkan koordinatnya menggunakan fungsi dan tatal imej, atau gunakan ' tatalKe() ” kaedah untuk mengambil elemen dan tatalnya dengan sewajarnya. Blog ini menunjukkan konsep untuk menatal ke elemen menggunakan JavaScript.