Έχω ορίσει τη σελίδα να μετακινείται προς τα πάνω όταν γίνεται κλικ σε ένα κουμπί. Αλλά πρώτα χρησιμοποίησα μια δήλωση if για να δω αν η κορυφή της σελίδας δεν έχει οριστεί στο 0. Στη συνέχεια, αν δεν είναι 0, κινώ τη σελίδα για να μετακινηθεί προς τα πάνω.
var body = $("body");
var top = body.scrollTop() // Get position of the body
if(top!=0)
{
body.animate({scrollTop:0}, '500');
}
Το δύσκολο μέρος τώρα είναι η κίνηση κάτι ΜΕΤΑ την κύλιση της σελίδας στην κορυφή. Έτσι, η επόμενη σκέψη μου είναι να βρω ποια είναι η θέση της σελίδας. Έτσι χρησιμοποίησα το αρχείο καταγραφής της κονσόλας για να το μάθω.
console.log(top); // the result was 365
Αυτό μου έδωσε ένα αποτέλεσμα 365, υποθέτω ότι είναι ο αριθμός θέσης που βρισκόμουν λίγο πριν κάνω κύλιση στην κορυφή.
Η ερώτησή μου είναι πώς μπορώ να ορίσω τη θέση να είναι 0, έτσι ώστε να μπορώ να προσθέσω ένα άλλο animation που τρέχει μόλις η σελίδα είναι στο 0;
Ευχαριστώ!
Για να το κάνετε αυτό, μπορείτε να ορίσετε μια συνάρτηση επανάκλησης για την εντολή animate, η οποία θα εκτελεστεί μετά το τέλος της κίνησης κύλισης.
Για παράδειγμα:
var body = $("html, body");
body.stop().animate({scrollTop:0}, 500, 'swing', function() {
alert("Finished animating");
});
Όπου βρίσκεται αυτός ο κώδικας ειδοποίησης, μπορείτε να εκτελέσετε περισσότερο javascript για να προσθέσετε περαιτέρω κινούμενα σχέδια.
Επίσης, το 'swing' είναι εκεί για να ρυθμίσετε το easing. Δείτε το http://api.jquery.com/animate/ για περισσότερες πληροφορίες.
Δοκιμάστε αυτό:
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');
});
}
για αυτό μπορείτε να χρησιμοποιήσετε τη μέθοδο callback
body.animate({
scrollTop:0
}, 500,
function(){} // callback method use this space how you like
);