Jeg indstiller siden til at rulle til toppen, når der klikkes på en knap. Men først brugte jeg et if statement for at se om toppen af siden ikke var sat til 0. Hvis det ikke er 0 animerer jeg siden til at rulle til toppen.
var body = $("body");
var top = body.scrollTop() // Get position of the body
if(top!=0)
{
body.animate({scrollTop:0}, '500');
}
Den vanskelige del er nu at animere noget EFTER at siden er rullet til toppen. Så min næste tanke er, at finde ud af hvad sidens position er. Så jeg brugte konsol log for at finde ud af det.
console.log(top); // the result was 365
Dette gav mig et resultat på 365, jeg gætter på, at det er det positionsnummer, jeg var på lige før jeg rullede til toppen.
Mit spørgsmål er, hvordan jeg sætter positionen til at være 0, så jeg kan tilføje en anden animation, der kører, når siden er på 0?
Tak!
For at gøre dette kan du indstille en callback-funktion for animate-kommandoen, som udføres, når rulleanimationen er afsluttet.
For eksempel:
var body = $("html, body");
body.stop().animate({scrollTop:0}, 500, 'swing', function() {
alert("Finished animating");
});
Hvor denne alarmkode er, kan du udføre mere javascript for at tilføje yderligere animation.
Desuden er 'swing' der til at indstille easing. Tjek http://api.jquery.com/animate/ for mere info.
Prøv dette i stedet:
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');
});
}
til dette kan du bruge callback-metoden
body.animate({
scrollTop:0
}, 500,
function(){} // callback method use this space how you like
);