Desplazamiento animado a la ID al cargar la página

123

Estoy tratando de animar el desplazamiento a una ID particular al cargar la página. He investigado mucho y me encontré con esto:

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

pero parece que esto comienza desde la ID y se anima a la parte superior de la página?

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

<h2 id="title1">Title here</h2>
jquery scroll jquery-animate Adi
fuente
1
Esta no es una gran respuesta, pero recomiendo el complemento "scrollTo" de Ariel Flesler; tiene muchas características para desplazarse por una página y algunas extensiones del complemento para casos comunes (por ejemplo, puede encontrar su complemento "LocalScroll" útil para desplazarse a la href de un enlace si está en la misma página). Puede obtener el complemento aquí: flesler.blogspot.com/2007/10/jqueryscrollto.html
Faisal

Respuestas:

327

Solo estás desplazando la altura de tu elemento. offset () devuelve las coordenadas de un elemento relativo al documento, y topparam 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 puede agregarle un retraso:

$("html, body").delay(2000).animate({scrollTop: $('#title1').offset().top }, 2000);
BumbleB2na
fuente
1
¿Qué tiene el desplazamiento automático que me hace decir "WOW COOL !!"? Quizás sea la simplicidad de su solución.
theblang
Necesitaba desplazar un elemento a la vista en la carga de la página, pero tuve dos problemas: a) el uso de "html, body" dio dos devoluciones de llamada (una para cada elemento coincidente). b) Depende del navegador qué cuerpo o html funciona. Así que hice una idea general que puede adaptar para usar en su proyecto para asegurarse de que el desplazamiento hacia la vista funciona en "cualquier" navegador y que solo recibirá una devolución de llamada cuando finalice la animación. gist.github.com/netsi1964/4ddffe1ae14e05220d25
Netsi1964
2
Esto no es realmente correcto. Realmente debería considerar la posición de desplazamiento actual del cuerpo o elemento que estamos tratando de hacer scroll. Con eso en mente, agregaría la posición de desplazamiento actual de bodya la offset().topposición del elemento que queremos ver. La suma resultante es el valor al que queremos desplazarnos. $('html, body').animate({ scrollTop: ($('html, body').scrollTop() + $('#title1').offset().top) }, 1000);
mattdevio
@magreenberg, ¿has probado esto? Si la posición de desplazamiento actual está por encima del valor 0, entonces lo que está sugiriendo podría no funcionar. Supongamos que el contenedor desplazable tiene una altura de 1000 píxeles y la posición de desplazamiento actual es de 1000. Digamos que el elemento al que se desplaza se encuentra en el centro vertical en 500. Creo que lo que sugiere le indicaría que se desplace a 1500 , ¿derecho?
BumbleB2na
@ BumbleB2na .offset().tople daría un número negativo en este caso. Y esto realmente solo funciona bodyy htmlya offset().topque le dará el desplazamiento superior del documento, no el padre de desplazamiento previsto.
mattdevio
12

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

document.getElementById('title1').scrollIntoView({block: 'start', behavior: 'smooth'});
<h2 id="title1">Some title</h2>
Expandir fragmento

El parámetro 'suave' de PS ahora funciona desde Chrome 61 como se menciona en julien_c en los comentarios.

Vladimir Vovk
fuente
1
Funciona ahora (desde Chrome 61)
julien_c
Asegúrese de verificar la compatibilidad del navegador. A partir de 10/2018 IE (11), Edge y Safari admiten "scrollIntoView" pero no la opción "suave".
metal_jacke1
Pure JS ftw. ¡Gracias por ese fragmento! Suave como crema de mantequilla doble
jean d'arme
3

Hay un complemento jquery para esto. Desplaza el documento a un elemento específico, de modo que quede perfectamente en el medio de la ventana gráfica. También admite funciones 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"});
Eugene Tiurin
fuente
"También admite funciones de animación para que el efecto de desplazamiento se vea súper suave" Desafortunadamente, eso no es cierto. Si la computadora es lenta por alguna razón, simplemente sigue saltando sin moverse realmente correctamente.
brunoais
El desplazamiento suave requiere que se calculen muchos píxeles. Claro que una "computadora" lenta (más GPU) no puede hacer esto, pero debido a la falta de suficientes ALU. Entonces, generalmente tiene razón. Y realmente fácil desplazamiento lib.
Roland
1

intente con el siguiente código. crear elementos con desplazamiento de página de nombre de clase y mantener el nombre de identificación hrefde 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();
    });
Akhil
fuente
-3

para desplazamiento simple, use el siguiente estilo

altura: 200 px; desbordamiento: desplazamiento;

y use esta clase de estilo que div o sección desea mostrar desplazamiento

mm
fuente