Comment faire défiler jusqu'à un élément en utilisant JavaScript ?

Question

J'essaie de déplacer la page vers un élément <div>

J'ai essayé le code suivant en vain :

 document.getElementById("divFirst").style.visibility = 'visible';
document.getElementById("divFirst").style.display = 'block';

Answer 1

scrollIntoView fonctionne bien :

 document.getElementById("divFirst").scrollIntoView();

référence complète dans la documentation MDN : https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView

Answer 2

Vous pouvez utiliser une ancre pour "concentrer" le div. C'est à dire:

 <div id="myDiv"></div>

puis utilisez le javascript suivant :

 // the next line is required to work around a bug in WebKit (Chrome / Safari)
location.href = "#";
location.href = "#myDiv";

Answer 3

La meilleure et la plus courte réponse que ce qui fonctionne même avec des effets d'animation :

 var scrollDiv = document.getElementById("myDiv").offsetTop;
window.scrollTo({ top: scrollDiv, behavior: 'smooth'});

Si vous avez une barre de navigation fixe, soustrayez simplement sa hauteur de la valeur supérieure, donc si la hauteur de votre barre fixe est de 70px, la ligne 2 ressemblera à :

 window.scrollTo({ top: scrollDiv-70, behavior: 'smooth'});

Explication: La ligne 1 obtient la position de l'élément La ligne 2 fait défiler jusqu'à la position de l'élément ; behavior ajoute un effet animé fluide