Cómo desplazarse por la ventana usando la función JQuery $ .scrollTo ()

98

Intento desplazarme hacia abajo 100px cada vez que el usuario se acerca a la parte superior del documento.

Tengo la función ejecutándose cuando el usuario se acerca a la parte superior del documento, pero la función .scrollTo no funciona.

Puse una alerta antes y después para verificar si realmente era la línea que la estaba deteniendo y solo se activa la primera alerta, aquí está el código:

alert("starting");
$.scrollTo({ top: '+=100px', left: '+=0px' }, 800);
alert("finished");

Sé que tengo la página de jquery vinculada correctamente porque estoy usando muchas otras funciones de jquery y todas funcionan bien. También intenté eliminar el 'px' de arriba y no parece hacer una diferencia.

3

Jquery en sí puede funcionar bien, pero ¿está seguro de que tiene el complemento scrollTo vinculado correctamente? Cambie una de esas alertas a alerta ($. ScrollTo);

— Andrew

97

Si no funciona, ¿por qué no intentas usar el método scrollTop de jQuery?

$("#id").scrollTop($("#id").scrollTop() + 100);

Si está buscando desplazarse sin problemas, puede usar la función básica setTimeout / setInterval de javascript para que se desplace en incrementos de 1px durante un período de tiempo establecido.

— Fermin
fuente

8

Tenga en cuenta que si desea desplazarse por toda la página y no por elementos individuales, use $ ('html, body') tal como Tim ha señalado aquí. Solo $ ('body') no funcionará en todos los navegadores.

— i--

321

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

— Mihai
fuente

19

A menudo me he preguntado por qué la gente usa 'html, body' para scrollTop en lugar de solo 'html'. Tiene alguna idea sobre esto?

— Scott Greenfield

+1 funcionó para mí;) También me interesa saber por qué en html, bodylugar de solo html.

— Kato

9

@ScottGreenfield, @Kato: no estoy seguro de por qué, pero este comentario dice que no se incluye bodyesto en Chrome 4: stackoverflow.com/questions/1890995/…

— Yuji 'Tomita' Tomita

scrollTop: 0también está funcionando bien. Pero la duración disminuye. Funciona bien si se establece 1000 en velocidad

— shashwat

Esta es una buena solución hasta que desee agregar un método completo; se ejecutará dos veces. La solución de @complistic es más elegante y lo evitará.

— plankguy

41

jQuery ahora admite scrollTop como una variable de animación.

$("#id").animate({"scrollTop": $("#id").scrollTop() + 100});

Ya no necesita setTimeout / setInterval para desplazarse sin problemas.

— Todd
fuente

Obtuve algunos errores de sintaxis: falta el cierre {. De lo contrario, este es un buen punto.

— Joshua

1

¿Debería ser $("#id").offset().topen su lugar?

— codeulike

15

Para solucionar el problema de htmlvs body, solucioné esto no animando el CSS directamente, sino llamando window.scrollTo();en cada paso:

$({myScrollTop:window.pageYOffset}).animate({myScrollTop:300}, {
  duration: 600,
  easing: 'swing',
  step: function(val) {
    window.scrollTo(0, val);
  }
});

Esto funciona muy bien sin ningún problema de actualización, ya que utiliza JavaScript en varios navegadores.

Eche un vistazo a http://james.padolsey.com/javascript/fun-with-jquerys-animate/ para obtener más información sobre lo que puede hacer con la función animada de jQuery.

— complista
fuente

1

Esto es brillante. Sólo cambiado window.pageYOffseta $(window).scrollTop()y window.scrollTo(0, val)a $(window).scrollTop(val)lo que no tiene que preocuparse por la compatibilidad del navegador.

— leftclickben

1

Nunca pensé en pasar un objeto al método animado de jQuery de esa manera. Tantos usos posibles. Esta solución es genial, gracias.

— Synexis

Sí, la técnica es una contribución significativa. Anteriormente solucionó los problemas del navegador usando "window.scrollTo ()" directamente, pero eso no permite una devolución de llamada "completa", ni una promesa. Gracias @complistic por esta solución. Además, mi agradecimiento a @leftclickben; Implementé su variación usando ".scrollTop ()". Además, el artículo "james.padolsey", por enlace, es una lectura concisa y muy valiosa.

— IAM_AL_X

Creo que "window.scrollTo ()" debería ser compatible con todos los navegadores modernos.

— IAM_AL_X

7

Parece que tiene la sintaxis ligeramente incorrecta ... Supongo, según su código, que está tratando de desplazarse hacia abajo 100px en 800ms, si es así, entonces esto funciona (usando scrollTo 1.4.1):

$.scrollTo('+=100px', 800, { axis:'y' });

— Alconja
fuente

6

En realidad algo como

function scrollTo(prop){
    $('html,body').animate({scrollTop: $("#"+prop).offset().top +
 parseInt($("#"+prop).css('padding-top'),10) },'slow');
}

funcionará bien y apoyará el acolchado. También puede admitir márgenes fácilmente; para completar, consulte a continuación

function scrollTo(prop){
    $('html,body').animate({scrollTop: $("#"+prop).offset().top 
+ parseInt($("#"+prop).css('padding-top'),10) 
+ parseInt($("#"+prop).css('margin-top'),10) +},'slow');
}

— Tim
fuente