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 al principio del documento.

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

puse una alerta antes y después de comprobar para ver si realmente era la línea o no que se detenía y sólo la primera alerta se apaga, aquí está el código:

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

sé que tengo la página jquery se vinculó correctamente porque estoy usando muchas otras funciones jquery y todas funcionan bien. También intenté eliminar el 'px' de arriba y no parece marcar la diferencia.

Answer 1

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

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

Si usted está buscando para desplazarse sin problemas se puede usar javascript función básica setTimeout/setInterval para que sea desplazarse en incrementos de 1 píxel durante un período de tiempo determinado.

Answer 2

Parece que tienes la sintaxis un poco equivocada ... Supongo que, basado en tu código, estás intentando desplazarte hacia abajo 100px en 800ms, si es así, esto funciona (usando scrollTo 1.4.1):

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

Answer 3

jQuery ahora es compatible con scrollTop como una variable de animación.

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

Ya no es necesario configurar el tiempo de espera/setInterval para desplazarse sin problemas.

Answer 4

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

Answer 5

realidad algo así como

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

va a funcionar muy bien y el acolchado de apoyo. También puede apoyar márgenes fácil - para la terminación ver más abajo

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

Answer 6

para moverse por la cuestión html vs body, me fijo esto no anima el css directamente sino más bien llamar window.scrollTo(); en cada paso:

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

Esto funciona bien sin ningún tipo de inconvenientes de actualización, ya que usa JavaScript entre 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.