Asetan sivun vierittämään sivun yläreunaan, kun painiketta napsautetaan. Mutta ensin käytin if-lauseketta nähdäkseni, jos sivun yläreunan arvoksi ei ole asetettu 0. Sitten jos se ei ole 0, animoin sivun vierittämään sivun yläreunaan.
var body = $("body");
var top = body.scrollTop() // Get position of the body
if(top!=0)
{
body.animate({scrollTop:0}, '500');
}
Hankala osa on nyt animoida jotain sen jälkeen, kun sivu on vierinyt ylöspäin. Seuraava ajatukseni on siis selvittää, mikä on sivun sijainti. Joten käytin konsolin lokia saadakseni sen selville.
console.log(top); // the result was 365
Tämä antoi minulle tuloksen 365, arvelen, että se on sijaintinumero, jossa olin juuri ennen kuin vieritin sivun yläosaan.
Kysymykseni on, miten asetan sijainnin arvoksi 0, jotta voin lisätä toisen animaation, joka toimii, kun sivu on 0:ssa?
Kiitos!
Voit tehdä tämän asettamalla animate-komennolle takaisinkutsutoiminnon, joka suoritetaan vieritysanimaation päätyttyä.
Esimerkiksi:
var body = $("html, body");
body.stop().animate({scrollTop:0}, 500, 'swing', function() {
alert("Finished animating");
});
Missä tuo hälytyskoodi on, voit suorittaa lisää javascriptia animaation lisäämiseksi.
Myös 'swing' on olemassa easingin asettamista varten. Katso lisätietoja osoitteesta http://api.jquery.com/animate/.
Kokeile sen sijaan tätä:
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');
});
}
tätä varten voit käyttää callback-menetelmää
body.animate({
scrollTop:0
}, 500,
function(){} // callback method use this space how you like
);