Saya mengatur halaman untuk menggulir ke atas ketika tombol diklik. Tapi pertama-tama saya menggunakan pernyataan if untuk melihat apakah bagian atas halaman tidak diatur ke 0. Kemudian jika bukan 0 saya menghidupkan halaman untuk menggulir ke atas.
var body = $("body");
var top = body.scrollTop() // Get position of the body
if(top!=0)
{
body.animate({scrollTop:0}, '500');
}
Bagian yang sulit sekarang adalah menjiwai sesuatu SETELAH halaman telah bergulir ke atas. Jadi pemikiran saya selanjutnya adalah, cari tahu apa posisi halaman itu. Jadi saya menggunakan log konsol untuk mencari tahu.
console.log(top); // the result was 365
Ini memberi saya hasil 365, saya menduga itu adalah nomor posisi saya sebelum menggulir ke atas.
Pertanyaan saya adalah bagaimana cara mengatur posisi menjadi 0, sehingga saya dapat menambahkan animasi lain yang berjalan setelah halaman berada di 0?
Terima kasih!
jquery
jquery-animate
scrolltop
Juan Di Diego
sumber
sumber
Jawaban:
Untuk melakukan ini, Anda dapat mengatur fungsi callback untuk perintah animate yang akan dijalankan setelah animasi gulir selesai.
Sebagai contoh:
Di mana kode lansiran itu, Anda dapat mengeksekusi lebih banyak javascript untuk menambahkan animasi lebih lanjut.
Juga, 'ayunan' ada di sana untuk mengatur pelonggaran. Lihat http://api.jquery.com/animate/ untuk info lebih lanjut.
sumber
Coba kode ini:
sumber
$("html")
harus digunakan sebagai gantinya, karena dalam kasus Anda jika Anda menambahkan fungsi panggilan balik itu akan dipanggil dua kali, sekali untuk html dan sekali untuk tubuh . Dan menggunakan tubuh tidak melakukan apa-apa.Gunakan ini:
sumber
untuk ini, Anda dapat menggunakan metode panggilan balik
sumber
Coba ini sebagai gantinya:
sumber
Solusi sederhana:
gulir ke elemen apa pun dengan ID atau NAME:
kode:
sumber
var
diperlukan untuk tidak menimpa yang global (jika ada variabel global dengan nama itu)Kode dengan fungsi klik ()
.toTop
= kelas elemen yang diklik mungkinimg
ataua
sumber
sumber
kamu harus melihat ini
atau coba mereka
sumber
sumber
Anda dapat menggunakan kelas CSS atau id HTML, untuk menjaga agar tetap simetris, saya selalu menggunakan kelas CSS misalnya
sumber