Banyak halaman web akan menempatkan tombol "kembali ke atas" di bawah ini, terutama halaman web yang tidak memiliki navigasi di bagian bawah halaman, yang dapat membantu pengunjung menemukan navigasi lagi atau mengunjungi kembali iklan (sangat indah). Karena JavaScript menjadi semakin banyak digunakan dalam beberapa tahun terakhir, efek geser ada di mana -mana, jadi saya mengikuti tren dan membuat kembali ke fungsi teratas untuk menciptakan efek geser. Kemudian, agar lebih sesuai dengan karakteristik fisik, efek geser dari memperlambat ditransformasikan.
Mari kita bicara tentang prinsipnya terlebih dahulu. Kami akan mendapatkan jarak dari bilah gulir ke bagian atas halaman, dan kemudian memindahkannya dengan jarak tertentu; kemudian dapatkan jarak dari bilah gulir ke bagian atas halaman, dan pindahkan dengan jarak tertentu (sedikit lebih kecil dari yang terakhir); dan sebagainya...
<type skrip = "Text/JavaScript">/*** Kembali ke bagian atas halaman* @param akselerasi akselerasi* @param waktu interval waktu (ms) **/fungsi gotop (akselerasi, waktu) {akselerasi = akselerasi || 0.1; Waktu = Waktu || 16; var x1 = 0; var y1 = 0; var x2 = 0; var y2 = 0; var x3 = 0; var y3 = 0; if (document.documentElement) {x1 = document.documentelement.scrollleft || 0; y1 = document.documentelement.scrolltop || 0; } if (document.body) {x2 = document.body.scrollleft || 0; y2 = document.body.scrolltop || 0; } var x3 = window.scrollx || 0; var y3 = window.scrolly || 0; // Jarak horizontal dari bilah gulir ke bagian atas halaman var x = math.max (x1, math.max (x2, x3)); // Jarak vertikal dari bilah gulir ke bagian atas halaman var y = math.max (y1, math.max (y2, y3)); // Gulir jarak = Jarak/kecepatan saat ini, karena jarak lebih kecil dan kecepatannya lebih besar dari 1, jarak gulir akan menjadi lebih kecil dan lebih kecil kecepatan var = 1 + akselerasi; window.scrollto (math.floor (x / speed), math.floor (y / speed)); // Jika jaraknya tidak nol, terus panggil fungsi iterasi jika (x> 0 || y> 0) {var invokefunction = "gotop (" + akselerasi + "," + waktu + ")"; window.setTimeout (invokefunction, time); }} </script>document.documentelement.scrolltop, document.body.scrolltop, window.scrolly sebenarnya sama, tetapi mereka hanya bekerja di beberapa browser. Adapun browser mana yang berfungsi, Anda dapat men -debug sendiri.
Bagaimana cara menggunakannya?
Salinan kode adalah sebagai berikut:
<a href = "#" onclick = "gotop (); return false;"> top </a>