Gunakan js asli untuk membuat kesan gelongsor mudah untuk kembali ke kemahiran top_javascript

Banyak halaman web akan meletakkan butang "kembali ke atas" di bahagian bawah, terutamanya halaman web tanpa navigasi di bahagian bawah halaman Ini boleh membantu pelawat mencari navigasi semula atau menyemak iklan (idea yang bagus). Memandangkan JavaScript semakin digunakan secara meluas dalam beberapa tahun kebelakangan ini, kesan gelongsor ada di mana-mana, jadi saya mengikutinya dan menjadikan fungsi kembali ke atas sebagai kesan gelongsor. Kemudian, untuk menyesuaikan ciri fizikal dengan lebih baik, ia telah diubah suai untuk mempunyai kesan gelongsor yang berkurangan.

Mula-mula mari kita bercakap tentang prinsipnya Kita akan mendapatkan jarak dari bar skrol ke bahagian atas halaman, dan kemudian mengalihkannya ke atas jarak tertentu, kemudian dapatkan jarak dari bar skrol ke bahagian atas halaman, dan gerakkannya ke atas pada jarak tertentu (sedikit lebih kecil daripada kali terakhir); Dan seterusnya...

<script type="text/javascript"> 
/** 
* 回到页面顶部 
* @param acceleration 加速度 
* @param time 时间间隔 (毫秒) 
**/
function goTop(acceleration, time) { 
acceleration = acceleration || 0.1; 
time = time || 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; 

// 滚动条到页面顶部的水平距离 
var x = Math.max(x1, Math.max(x2, x3)); 
// 滚动条到页面顶部的垂直距离 
var y = Math.max(y1, Math.max(y2, y3)); 

// 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小 
var speed = 1 + acceleration; 
window.scrollTo(Math.floor(x / speed), Math.floor(y / speed)); 

// 如果距离不为零, 继续调用迭代本函数 
if(x > 0 || y > 0) { 
var invokeFunction = "goTop(" + acceleration + ", " + time + ")"; 
window.setTimeout(invokeFunction, time); 
} 
} 
</script>

document.documentElement.scrollTop, document.body.scrollTop, window.scrollY sebenarnya adalah sama, tetapi ia hanya berfungsi dalam sesetengah penyemak imbas. Bagi mana yang berfungsi dalam pelayar mana, anda boleh nyahpepijat sendiri.

Bagaimana untuk menggunakan?

Salin kod Kod adalah seperti berikut:

TOP