Methode om het venster naar een element te scrollen in JavaScript

De methode scrollIntoView scrolt het venster naar het opgegeven element. De methode wordt toegepast op het element waarnaar het venster moet worden gescrolld. Met de parameter van de methode wordt geregeld waar het element moet verschijnen: bovenin of onderin het venster.

Laten we naar voorbeelden kijken. Laten we het venster zo scrollen dat het element bovenin het venster komt:

elem.scrollIntoView(true);

En laten we het venster nu zo scrollen dat het element onderin het venster komt:

elem.scrollIntoView(false);

Je kunt ook een object met instellingen als parameter doorgeven. Laten we het venster soepel naar het element scrollen:

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

Het object met instellingen heeft ook instellingen voor de uitlijning van de pagina ten opzichte van het element. De instelling block bepaalt de verticale uitlijning, en de instelling inline - de horizontale. Ze kunnen de volgende waarden aannemen: 'start', 'center', 'end', 'nearest'.

Laten we het proberen:

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

Gegeven een element en een knop. Bij het klikken op de knop, scroll de pagina naar dit element. Probeer alle beschreven mogelijkheden uit.