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

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

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

javascriptelem.scrollIntoView(true);

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

javascriptelem.scrollIntoView(false);

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

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

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

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

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