Animer Faites défiler jusqu'à ID lors du chargement de la page

Question

Vous souhaitez animer le défilement vers un identifiant particulier lors du chargement de la page. J'ai fait beaucoup de recherches et suis tombé sur ceci:

 $("html, body").animate({ scrollTop: $('#title1').height() }, 1000);
 

mais cela semble commencer à partir de l'ID et animer vers le haut de la page?

Le code HTML (qui se trouve au milieu de la page) est simplement:

 <h2 id="title1">Title here</h2>
 

Aucune suggestion?

Adi

Answer 1

Vous faites seulement défiler la hauteur de votre élément. offset () renvoie les coordonnées d'un élément par rapport au document, et top param vous donnera la distance de l'élément en pixels le long de l'axe des ordonnées:

 $("html, body").animate({ scrollTop: $('#title1').offset().top }, 1000);
 

Et vous pouvez également ajouter un délai à cela:

 $("html, body").delay(2000).animate({scrollTop: $('#title1').offset().top }, 2000);
 

Answer 2

Il y a un plugin jquery pour cela. Il fait défiler le document vers un élément spécifique, de sorte qu'il se trouve parfaitement au centre de la fenêtre. Il prend également en charge les animations facilitant l’effet de défilement. Vérifiez ce lien .

Dans votre cas, le code est

 $("#title1").animatedScroll({easing: "easeOutExpo"});