Kembali ke tombol atas di beranda Taobao adalah sebagai berikut: tombol akan ditampilkan setelah ditarik ke bawah ke jarak tertentu. Klik tombol perlahan kembali ke atas
Pertama -tama mari kita analisis peristiwa apa yang perlu ditambahkan untuk mencapai efek seperti itu. Pindahkan mouse masuk dan keluar dari tombol, dan kinerja tombol berubah, sehingga Anda perlu menambahkan acara mouseover dan mouseout ke tombol. Untuk mendengarkan perubahan di scrollbar, Anda perlu menambahkan acara gulir ke jendela, klik tombol untuk kembali ke atas, dan menambahkan acara klik ke tombol. Kami merangkum event handler menjadi tiga fungsi bergerak, pindah, gotop;
Ini kode HTML/CSS
Salinan kode adalah sebagai berikut:
<div>
<div> head </div>
<div> konten utama, tinggi 2000px </div>
<Divbtn "> kembali ke atas </div>
</div>
Salinan kode adalah sebagai berikut:
.container {width: 980px;
.Content {Height: 2000px;
#btn {
Posisi: diperbaiki;
Bawah: 50px;
Kanan: 0;
Lebar: 54px;
Tinggi: 55px;
Latar Belakang: URL (Icons.png) No -Repeat 0 -110px;} // Anda dapat menemukan gambar latar belakang sesuka hati
font-size: 12px;
Line-Height: 55px;
Teks-Align: tengah;
Text -Indent: -9999em;
kursor: pointer;
Tampilan: Tidak Ada;
Di bawah ini adalah kode JS lengkap
Salinan kode adalah sebagai berikut:
window.addeventListener ("load", function () {
var btn = document.getElementById ("btn");
btn.addeventlistener ("mouseover", movin, false);
btn.addeventListener ("mouseout", moveout, false);
function moveIn () {
btn.style.color = "#ffffff";
btn.style.textindent = "0em";
btn.style.backgroundImage = "none";
btn.style.backgroundColor = "#ff4401";
}
function moveout () {
btn.style.textindent = "-9999em";
btn.style.backgroundImage = "url (icons.png)";
}
fungsi gotop (akselerasi, waktu) {// memodifikasi parameter untuk menyesuaikan kecepatan untuk kembali ke atas
akselerasi = akselerasi ||
Waktu = Waktu ||
var speed = 1 + akselerasi;
fungsi getscrolltop () {// Dapatkan jarak vertikal bilah gulir
return document.documentelement.scrolltop ||.
}
Fungsi SetsCrollTop (Value) {// Atur jarak vertikal bilah gulir.
document.documentelement.scrolltop = value;
document.body.scrolltop = value;
}
window.onscroll = function () {
var scrolltop = getScrollTop ();
if (scrolltop> 100) {// Saat menentukan seberapa jauh scrollbar dari atas jendela, itu 100px
btn.style.display = "block";
} kalau tidak {
btn.style.display = "none";
}
};
btn.onClick = function () {
var timer = setInterval (function () {
setScrollTop (Math.floor (getscrolltop () /speed));
if (getscrolltop () == 0)
clearInterval (timer);
}, waktu);
};
}
gotop (0,2, 8);
}, PALSU);
Tentu saja, ada metode implementasi lain, dan berikut ini adalah kode kunci untuk metode lain
Salinan kode adalah sebagai berikut:
btn.onClick = function () {
clearInterval (timer);
var timer = setInterval (function () {
var sekarang = scrolltop; // jarak vertikal bilah gulir
speed = (0 - sekarang) / 10;
speed = math.floor (kecepatan);
if (sekarang == 0);
clearInterval (timer);
document.documentelement.scrolltop = sekarang + kecepatan; // browser dalam mode standar
document.body.scrolltop = sekarang + kecepatan; // browser dalam mode aneh
}, 15);
}
Kode di sini terutama mengacu pada sumber daya lain di internet dan menambahkan sedikit pemahaman Anda sendiri. Tentu saja ada metode implementasi lain, seperti window.scrollto () yang didukung JavaScript pada waktu paling awal. Jika Anda menerapkannya dengan JQ, volume kode akan menjadi sangat kecil
Secara pribadi, saya pikir akan jauh lebih mudah untuk mempelajari JavaScript asli terlebih dahulu, seperti mencari tahu tipe data, penutupan, warisan, ruang lingkup, DOM, CSS, pemrosesan acara, AJAX, dll., Dan mempelajari kerangka kerja lainnya setelah kemahiran.