javascript - posicion - offset top jquery scroll

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

Question

Intento 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 para comprobar si realmente era la línea o no lo que 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 correctamente enlazada porque estoy usando muchas otras funciones de jquery y todas funcionan bien. También intenté eliminar el ''px'' de arriba y no parece marcar la diferencia.

Answer 1

En realidad, algo así como

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

funcionará muy bien y admitirá el relleno. También puede admitir márgenes fácilmente, para completar, ver 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'');
}

Answer 2

Para evitar el problema html vs body , solucioné esto al no animar directamente el css, sino que window.scrollTo(); 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 bien sin ningún tipo de inconvenientes de actualización, ya que usa 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 3

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

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

Answer 4

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 utilizar la función javascript setTimeout / setInterval para hacer que se desplace en incrementos de 1px durante un período de tiempo determinado.

Answer 5

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

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

Ya no es necesario configurar SetTimeout / setInterval para desplazarse sin problemas.

Answer 6

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