Como rolar a janela usando JQuery $ .scrollTo () função

Question

Eu estou tentando de rolagem para baixo 100px cada vez que o usuário recebe perto da parte superior do documento.

Eu tenho a função de execução quando o utilizador se aproxima do topo do documento, mas a função .scrollTo não está funcionando.

Eu coloquei um alerta depois e antes de verificar para ver se ele realmente foi a linha ou não que estava parando-o e apenas o primeiro alerta dispara, aqui está o código:

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

Eu sei que tenho a página jquery ligados corretamente porque eu estou usando muitas outras funções jQuery todo e todos eles funcionam bem. Eu também tentei remover o 'px' de cima e não parece fazer a diferença.

Answer 1

Se ele não está funcionando por que você não tente usar método scrollTop do jQuery?

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

Se você está procurando para se deslocar sem problemas você poderia usar básico javascript setTimeout / setInterval função para fazê-lo rolar em incrementos de 1 pixel ao longo de um determinado período de tempo.

Answer 2

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

Answer 3

jQuery agora suporta scrollTop como uma variável de animação.

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

Você não precisa mais setTimeout / setInterval para rolar sem problemas.

Answer 4

Para contornar a html vs questão body, eu reparei isso não animar o css diretamente, mas sim chamar window.scrollTo(); em cada etapa:

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

Isso funciona muito bem sem quaisquer truques de atualização, uma vez que está a usar cross-browser JavaScript.

Tenha um olhar em http://james.padolsey.com/javascript / fun-with-jquerys-animado / para obter mais informações sobre o que você pode fazer com a função de animar jQuery.

Answer 5

Parece que você tem a sintaxe ligeiramente errado ... Estou assumindo com base no seu código que você está tentando rolar para baixo 100px em 800ms, se assim for, então isso funciona (usando scrollTo 1.4.1):

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

Answer 6

Na verdade algo como

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

vai funcionar muito bem e apoiar estofamento. Você também pode apoiar margens facilmente - para a conclusão veja abaixo

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