Anima el desplazamiento a la ID en la carga de la página

Estoy intentando animar el desplazamiento a una ID particular en la carga de la página. He investigado mucho y encontré esto:

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

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

El HTML (que está en la mitad de la página) es simplemente:

 

Title here

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

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

Y también puedes agregarle un retraso:

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

Solución pura de javascript con función scrollIntoView () :

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

Some title

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

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

Hay un plugin 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. Mira este enlace

En tu caso, el código es

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

prueba con el siguiente código hacer elementos con el nombre de la clase page-scroll y mantener el nombre id a href de los 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(); }); 

para Scroll simple, usa el siguiente estilo

altura: 200px; desbordamiento: desplazamiento;

y usa esta clase de estilo que div o sección quieres mostrar scroll