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

Question

Im pliquer pour animer le défilement vers un ID particulier au chargement de la page. Je l'ai fait beaucoup de recherche et suis tombé sur ceci:

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

mais cela semble commencer à partir de l'ID et l'animation en haut de la page?

Le code HTML (ce qui est à mi-chemin vers le bas la page) est simplement:

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

Answer 1

Vous faites défiler que 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 y:

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

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

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

Answer 2

Il existe un plugin jquery pour cela. Il fait défiler le document vers un élément spécifique, de sorte qu'il serait parfaitement au milieu de la fenêtre. Il prend également en charge les facilités d'animation afin que l'effet de défilement semble super lisse. Vérifiez this link.

Dans votre cas, le code est

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

Answer 3

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

jquery-animate-body-for-all-browsers.

Answer 4

essayez avec le code suivant. font éléments avec un nom de classe en page et faire défiler garder le nom identifiant à href des liens correspondant

$('a.page-scroll').bind('click', function(event) { 
     var $anchor = $(this); 
     $('html, body').stop().animate({ 
      scrollTop: ($($anchor.attr('href')).offset().top - 50) 
     }, 1250, 'easeInOutExpo'); 
     event.preventDefault(); 
    }); 

Answer 5

solution javascript pur avec scrollIntoView() fonction:

document.getElementById('title1').scrollIntoView({block: 'start', behavior: 'smooth'});

<h2 id="title1">Some title</h2>

post-scriptum Le paramètre 'smooth' fonctionne maintenant à partir de Chrome 61 en tant que julien_c mentionné dans les commentaires.