jquery - texto - Anima el desplazamiento a la ID en la carga de la página
change text jquery (5)
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"});
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:
<h2 id="title1">Title here</h2>
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''});
<h2 id="title1">Some title</h2>
El parámetro PS ''smooth'' ahora funciona desde Chrome 61 como se mencionó en julien_c en los comentarios.
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();
});
$(jQuery.browser.webkit ? "body": "html").animate({ scrollTop: $(''#title1'').offset().top }, 1000);