Metode untuk Scroll Jendela ke Elemen di JavaScript

Metode scrollIntoView menggulir jendela ke elemen yang ditentukan. Metode ini diterapkan pada elemen yang ingin digulirkan ke tampilan jendela. Parameter metode ini mengatur di mana seharusnya elemen berada: di bagian atas jendela atau bawah.

Mari kita lihat contohnya. Gulir jendela sehingga elemen berada di bagian atas jendela:

elem.scrollIntoView(true);

Dan sekarang gulir jendela sehingga elemen berada di bagian bawah jendela:

elem.scrollIntoView(false);

Anda juga dapat meneruskan objek dengan pengaturan sebagai parameternya. Mari gulir jendela ke elemen dengan lancar:

elem.scrollIntoView({
	behavior: 'smooth',
});

Objek dengan pengaturan juga memiliki opsi penyelarasan halaman relatif terhadap elemen. Pengaturan block menentukan penyelarasan vertikal, dan pengaturan inline - horizontal. Mereka dapat menerima nilai-nilai berikut: 'start', 'center', 'end', 'nearest'.

Mari kita coba:

elem.scrollIntoView({
	behavior: 'smooth',
	block: 'start',
	inline: 'end',
});

Diberikan sebuah elemen dan sebuah tombol. Saat tombol ditekan, gulir halaman ke elemen tersebut. Cobalah semua fitur yang dijelaskan.