Metoda pro scrollování okna k elementu v JavaScriptu

Metoda scrollIntoView scrolluje okno k zadanému elementu. Metoda se aplikuje na element, ke kterému se má scrollovat okno. Parametrem metody se reguluje, kde se má element ocitnout: nahoře v okně nebo dole.

Podívejme se na příkladech. Scrollujme okno tak, aby byl element nahoře v okně:

elem.scrollIntoView(true);

A nyní scrollujme okno tak, aby byl element dole v okně:

elem.scrollIntoView(false);

Jako parametr lze také předat objekt s nastavením. Plynule scrollujme okno k elementu:

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

Objekt s nastavením má také možnosti zarovnání stránky vzhledem k elementu. Nastavení block zadává vertikální zarovnání, a nastavení inline - horizontální. Mohou přijímat následující hodnoty: 'start', 'center', 'end', 'nearest'.

Zkusme to:

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

Je dán element a tlačítko. Po stisknutí tlačítka scrollujte stránku k tomuto elementu. Vyzkoušejte všechny popsané možnosti.