Eu configuro a página para rolar para o topo quando um botão é clicado. Mas primeiro usei um comando if para ver se o topo da página não estava definido para 0. Depois, se ele's não está 0, animo a página para rolar para o topo.
var body = $("body");
var top = body.scrollTop() // Get position of the body
if(top!=0)
{
body.animate({scrollTop:0}, '500');
}
A parte complicada agora é animar algo APÓS a página ter rolado para o topo. Então o meu próximo pensamento é, descubram qual é a posição da página. Por isso, usei o registo da consola para descobrir.
console.log(top); // the result was 365
Isto me deu um resultado de 365, I'estou adivinhando que é o número de posição em que eu estava pouco antes de rolar para o topo.
A minha pergunta é como definir a posição para ser 0, para que eu possa adicionar outra animação que funcione assim que a página estiver a 0?
Obrigado!
Para fazer isso, você pode definir uma função de retorno para o comando animar que será executado após a animação de rolagem ter terminado.
Por exemplo:
var body = $("html, body");
body.stop().animate({scrollTop:0}, 500, 'swing', function() {
alert("Finished animating");
});
Onde está esse código de alerta, você pode executar mais javascript para adicionar em mais animação.
Também, o 'swing' está lá para definir a flexibilização. Confira http://api.jquery.com/animate/ para mais informações.
Tenta antes isto:
var body = $("body, html");
var top = body.scrollTop() // Get position of the body
if(top!=0)
{
body.animate({scrollTop :0}, 500,function(){
//DO SOMETHING AFTER SCROLL ANIMATION COMPLETED
alert('Hello');
});
}
para isso você pode usar o método callback
body.animate({
scrollTop:0
}, 500,
function(){} // callback method use this space how you like
);