Menetelmä ikkunan vieritykselle elementtiin JavaScriptissä

Menetelmä scrollIntoView vierittää ikkunan annettuun elementtiin. Menetelmää sovelletaan elementtiin, johon ikkuna tulisi vierittää. Menetelmän parametrillä säädetään, mihin elementin tulisi päätyä: ikkunan ylä- tai alaosaan.

Katsotaanpa esimerkkien avulla. Vieritetään ikkuna niin, että elementti on ikkunan yläreunassa:

javascriptelem.scrollIntoView(true);

Ja nyt vieritetään ikkuna niin, että elementti on ikkunan alareunassa:

javascriptelem.scrollIntoView(false);

Parametrina voidaan myös välittää objekti asetusten kanssa. Vieritetään ikkuna sulavasti elementtiin:

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

Asetusobjektilla on myös asetuksia sivun kohdistamiseksi elementtiin nähden. Asetus block määrittää pystysuuntaisen kohdistuksen, ja asetus inline - vaakatasoisen. Ne voivat saada seuraavat arvot: 'start', 'center', 'end', 'nearest'.

Kokeillaan:

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