Animate desplazamiento para ID en la página de carga

Question

Im Tring para animar el desplazamiento para una identificación particular, al cargar la página. He hecho un montón de investigación y me encontré con esto:

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

pero esto parece comenzar a partir del ID y animar a la parte superior de la página?

El HTML (que está a medio camino abajo de la página) es simplemente:

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

Answer 1

Sólo se está desplazando la altura de su elemento. offset() devuelve las coordenadas de un elemento con respecto al documento, y top parámetro le dará la distancia a del elemento en píxeles a lo largo del eje y:

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

y también se puede añadir un retardo a la misma:

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

Answer 2

Hay un complemento jquery para esto. Desplaza el documento a un elemento específico para que quede perfectamente en el medio de la ventana gráfica. También es compatible con animaciones de animación para que el efecto de desplazamiento se vea súper suave. Compruebe this link.

En su caso el código es

$("#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

tratan con código siguiente. hacen que los elementos con nombre de la clase página- desplazarse y mantener el nombre id para href de enlaces correspondientes

$('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

solución javascript puro con scrollIntoView() función:

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

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

P. S. El parámetro "suave" ahora funciona desde Chrome 61 como julien_c mencionado en los comentarios.