Jeg satte siden til å bla til toppen når det klikkes på en knapp. Men først brukte jeg en if-setning for å se om toppen av siden ikke var satt til 0. Hvis den ikke er 0, animerer jeg siden til å bla til toppen.
var body = $("body");
var top = body.scrollTop() // Get position of the body
if(top!=0)
{
body.animate({scrollTop:0}, '500');
}
Den vanskelige delen nå er å animere noe ETTER at siden har rullet til toppen. Så min neste tanke er å finne ut hva sideposisjonen er. Så jeg brukte konsoll-loggen for å finne ut av det.
console.log(top); // the result was 365
Dette ga meg et resultat på 365, jeg gjetter at det er posisjonsnummeret jeg var på like før jeg rullet til toppen.
Spørsmålet mitt er hvordan jeg setter posisjonen til å være 0, slik at jeg kan legge til en annen animasjon som kjører når siden er på 0?
På forhånd takk!
For å gjøre dette kan du angi en tilbakeringingsfunksjon for animasjonskommandoen som kjøres etter at rulleanimasjonen er ferdig.
For eksempel
var body = $("html, body");
body.stop().animate({scrollTop:0}, 500, 'swing', function() {
alert("Finished animating");
});
Der varslingskoden er, kan du kjøre mer javascript for å legge til ytterligere animasjon.
Dessuten er 'swing' der for å stille inn lettelsen. Sjekk ut http://api.jquery.com/animate/ for mer informasjon.
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');
});
}
for dette kan du bruke callback-metoden
body.animate({
scrollTop:0
}, 500,
function(){} // callback method use this space how you like
);