window.onload = function(){
var obtn = document.getElementById('btn'); //獲取回到頂部按鈕的ID
var clientHeight = document.documentElement.clientHeight; //獲取可視區域的高度
var timer = null; //定義一個定時器
var isTop = true; //定義一個布林值，用于判斷是否到達頂部
window.onscroll = function(){ //滾動條滾動事件
//獲取滾動條的滾動高度
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
if(osTop >= clientHeight){ //如果滾動高度大于可視區域高度，則顯示回到頂部按鈕
obtn.style.display = 'block';
}else{ //否則隱藏
obtn.style.display = 'none';
}
//主要用于判斷當 點擊回到頂部按鈕后 滾動條在回滾程序中，若手動滾動滾動條，則清除定時器
if(!isTop){
clearInterval(timer);
}
isTop = false;
}
obtn.onclick = function(){ //回到頂部按鈕點擊事件
//設定一個定時器
timer = setInterval(function(){
//獲取滾動條的滾動高度
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
//用于設定速度差，產生緩動的效果
var speed = Math.floor(-osTop / 6);
document.documentElement.scrollTop = document.body.scrollTop = osTop + speed;
isTop =true; //用于阻止滾動事件清除定時器
if(osTop == 0){
clearInterval(timer);
}
},30);
}
}
本人前端小白，請各位大佬多指教
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/263835.html
標籤：其他
上一篇：leetcode題解41-缺失的第一個正數原來如此簡單
下一篇：8--請求轉發和重定向