Μέθοδος για κύλιση του παραθύρου σε ένα στοιχείο σε JavaScript

Η μέθοδος scrollIntoView κάνει κύλιση του παραθύρου σε ένα δεδομένο στοιχείο. Η μέθοδος εφαρμόζεται στο στοιχείο προς το οποίο πρέπει να γίνει κύλιση του παραθύρου. Η παράμετρος της μεθόδου ρυθμίζει πού πρέπει να βρεθεί το στοιχείο: στο πάνω μέρος του παραθύρου ή στο κάτω μέρος.

Ας δούμε παραδείγματα. Ας κάνουμε κύλιση του παραθύρου έτσι ώστε το στοιχείο να βρίσκεται στο πάνω μέρος του παραθύρου:

elem.scrollIntoView(true);

Και τώρα ας κάνουμε κύλιση του παραθύρου έτσι ώστε το στοιχείο να βρίσκεται στο κάτω μέρος του παραθύρου:

elem.scrollIntoView(false);

Μπορείτε επίσης να περάσετε ως παράμετρο ένα αντικείμενο με ρυθμίσεις. Ας κάνουμε ομαλή κύλιση του παραθύρου στο στοιχείο:

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

Το αντικείμενο με τις ρυθμίσεις έχει επίσης ρυθμίσεις ευθυγράμμισης της σελίδας σε σχέση με το στοιχείο. Η ρύθμιση block ορίζει την κάθετη ευθυγράμμιση, και η ρύθμιση inline - την οριζόντια. Μπορούν να πάρουν τις ακόλουθες τιμές: 'start', 'center', 'end', 'nearest'.

Ας δοκιμάσουμε:

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

Δίνεται ένα στοιχείο και ένα κουμπί. Με πάτημα στο κουμπί, κάντε κύλιση της σελίδας σε αυτό το στοιχείο. Δοκιμάστε όλες τις περιγραφόμενες δυνατότητες.