Méthode pour faire défiler la fenêtre vers un élément en JavaScript

La méthode scrollIntoView fait défiler la fenêtre vers l'élément donné. La méthode est appliquée à l'élément vers lequel la fenêtre doit défiler. Le paramètre de la méthode règle où l'élément doit se trouver : en haut de la fenêtre ou en bas.

Regardons des exemples. Faisons défiler la fenêtre pour que l'élément soit en haut de la fenêtre :

elem.scrollIntoView(true);

Et maintenant, faisons défiler la fenêtre pour que l'élément soit en bas de la fenêtre :

elem.scrollIntoView(false);

On peut également passer un objet de paramètres. Faisons défiler la fenêtre vers l'élément de manière fluide :

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

L'objet de paramètres a également des options d'alignement de la page par rapport à l'élément. Le paramètre block définit l'alignement vertical, et le paramètre inline - l'alignement horizontal. Ils peuvent prendre les valeurs suivantes : 'start', 'center', 'end', 'nearest'.

Essayons :

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

Étant donné un élément et un bouton. Lors du clic sur le bouton, faites défiler la page vers cet élément. Testez toutes les fonctionnalités décrites.