JS === 實現點擊回到頂部
樣式：
body{height:10000px} // 產生滾動條
.go-2-top{width:50px; height:50px;background:red;cursor:pointer;position:fixed;right:20px;bottom:20px;display:none } // 模擬點擊div的時候回到頂部 最初隱藏，滾動一定距離顯示
結構：
<body>
<div class = "go-2-top" id = "back-top"></div>
</body>
JS:
<script>
var backTop = document.getElementById("back-top") //獲取到div 對象
// onscroll 事件 ====》在元素滾動條在滾動時觸發。
window.onscroll = function (){
var scrollTop = document.documentElement.scrollTop ? // 三目運算 = 兼容問題
document.documentElement.scrollTop :
document.body.scrollTop;
if(scrollTop > 800){ //當滾動條滾動的距離大於 800 的時候，才會顯示 回到頂部的div
backTop.style.display = "block"
}else{
backTop.style.display = "none"
}
}
// 為 div 添加點擊事件
var id; // ===== 要注意 id聲明的位置
backTop.onclick = function (){
id = SetInterval(function (){ // 使用間隔函數的理由===》當點擊回到頂部的時候，不是一下子滾動距離就變成0 ，而是形成一個過渡的過程，每隔16毫秒，current-100
var current = document.documentElement.scrollTop ? // 取得當前滾動的距離
document.documentElement.scrollTop :
document.body.scrollTop;
if(current === 0){
clearInterval(id); // 當滾動距離為0 的時候，要清除這個間隔函數
}
document.documentElement.scrollTop = current - 100 // 形成一個慢慢過渡到0 的過程
document.body.scrollTop = current - 100 // 寫兩個是為了兼容
} , 16)
}
// 在回到頂部的過程時候，鼠標滾輪動的時候，滾動會暫停
// 添加一個鼠標滾輪事件
window.onmousewheel = function (){
clearInterval(id); // ======= 這個時候會涉及到上面標注的要注意id的位置，最開始的時候 把他寫在了函數體里面，到這里的時候就獲取不到了。
}
學習要點總結 ：
1. 事件：
onscroll 滾動事件
onmousewheel 鼠標滾輪事件
2. 間隔函數
setInterval() == 兩個參數，一是執行的函數 二是間隔的時間
清除間隔函數
clearInterval(標識符)
3.scrollTop 兼容問題
document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
4.作用域