今天寫了一個回到頂部的demo,沒有複雜的邏輯，所以想來分享。 原理： 1.css上把按鈕固定定位在瀏覽器右下角上，預設為隱藏。 2.當頁面滾動的時候（window.onscroll），按鈕block, 3.當點擊按鈕的時候讓頁面的可視區高度距離瀏覽器頂端逐漸減少直至為0， a)此時需要用到一個定時 ...
今天寫了一個回到頂部的demo,沒有複雜的邏輯，所以想來分享。
原理：
1.css上把按鈕固定定位在瀏覽器右下角上，預設為隱藏。
2.當頁面滾動的時候（window.onscroll），按鈕block,
3.當點擊按鈕的時候讓頁面的可視區高度距離瀏覽器頂端逐漸減少直至為0，
a)此時需要用到一個定時器，初設為每30毫秒執行一次，
b)設置一個參數iSpeed，初始設為300,讓可視區高度距離瀏覽器頂端的距離每30毫秒減少300（參數，可變），直至為0.
4，當可視區距瀏覽器頂端的距離為0時，關閉定時器，按鈕none。
代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>回到頂部</title> <style> #but1{ position: fixed; bottom: 0; right: 0; display: none; } </style> <script> window.onload = function(){ var oBtn = document.getElementById('but1'); var timer = null; window.onscroll = function() { oBtn.style.display = 'block'; //當頁面滾動時按鈕呈現 var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; oBtn.onclick = function(){ var iSpeed = 200; timer = setInterval(function(){ var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; //可視區距頁面頂端的距離 document.documentElement.scrollTop = document.body.scrollTop = scrollTop - iSpeed; if (scrollTop == 0) { //如果可視區到達頂部，取消定時器 clearInterval(timer); } },30); }; if (scrollTop == 0) { oBtn.style.display = 'none'; } } }; </script> </head> <body style="height:2000px;"> <input type="button" id="but1" value="回到頂部"/> </body> </html>
註：oBtn.style.display = 'none';不能寫入oBtn.onclick內，否則如果是自己拖動可視區至瀏覽器頂端時按鈕不會none,因為只有當按鈕觸發時，display = 'none'才會執行，
另scrollTop也要單獨提取出來，因為作用域，函數外部無法訪問函數內部的變數。
