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

Question

Estoy intentando 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 antes para verificar si realmente era la línea o no la que la detenía 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 jquery vinculada correctamente porque estoy usando muchas otras funciones jquery y todas funcionan bien. También he intentado eliminar el 'px' de arriba y no parece hacer la diferencia.

Answer 1

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.

Answer 2

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

Answer 3

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

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

Ya no necesita establecer TimeTime / setInterval para desplazarse sin problemas.

Answer 4

Para solucionar el problema html vs body , arreglé esto no animando el CSS directamente, sino llamando a 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 entre 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.

Answer 5

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

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

Answer 6

En realidad algo así como

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

funcionará bien y admitirá relleno. 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');
}