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

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.

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.

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

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.

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.

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' });

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');
}