js 做返回頂部效果
阿新 • • 發佈：2018-12-04
涉及的知識點：
-
font-awesome字型圖示；使用的cdn。
-
window.onload 視窗載入完成事件；如果js程式碼寫在body標籤之前，則所有的js都要寫在window.onload的事件中；即等待視窗載入完成之後再執行！
-
window.onscroll 視窗滾動事件
-
視窗滾動的距離
document.documentElement.scrollTop ==>> 非IE滾動的距離
document.body.scrollTop ==>> IE滾動的距離
5. 定時器 setInterval 做返回頂部的動畫效果
6. 清除定時器
實現步驟：
-
註冊視窗滾動事件
-
滾動離頂部的距離大於300時，顯示ICON
-
註冊點選事件，返回頂部 ==>> 即設定scrollTop 的值為0
-
用定時器做返回頂部的滾動效果
完整程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>返回頂部效果</title> <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css"> <style type="text/css"> body{ margin: 0; padding: 0; } #returnTop{ position: fixed; right: 50px; bottom: 100px; } </style> <script type="text/javascript"> window.onload = function(){ // 1.註冊視窗滾動事件 window.onscroll = function(){ // 找到返回頂部的ICON var returnTopICON = document.getElementById("returnTop"); //非IE滾動的距離 //console.log(document.documentElement.scrollTop); //IE滾動的距離 //console.log(document.body.scrollTop); // Math.max 取非IE和IE兩個滾動距離的最大值 var scrollDistance = Math.max(document.documentElement.scrollTop, document.body.scrollTop); // 2. 滾動離頂部的距離大於300時，顯示ICON if(scrollDistance > 300){ returnTopICON.style.display = 'block'; }else{ returnTopICON.style.display = 'none'; } } //3. 註冊點選事件，返回頂部 ==>> 即設定scrollTop 的值為0 var returnTopICON = document.getElementById("returnTop"); returnTopICON.onclick = function(){ // 直接設定為0，是沒有過渡效果的 // document.documentElement.scrollTop = 0; // document.body.scrollTop = 0; // 4. 用定時器做返回頂部的滾動效果 var dsj = setInterval(function(){ var distance = Math.max(document.documentElement.scrollTop, document.body.scrollTop); distance -= 80; if(distance <= 0){ //如果滾動的距離 <= 0 時，清除掉定時器，否則點選圖示滾動到頂部後，不能往下拉，一拉就又滾動到頂部 clearInterval(dsj); }else{ document.documentElement.scrollTop = distance; document.body.scrollTop = distance; } },40); } } </script> </head> <body> <div style="background: firebrick;height: 500px;"> </div> <div style="height: 2000px;background: gainsboro"> <p id="returnTop" style="display: none"> <i class="fa fa-chevron-up fa-3x"></i> </p> </div> </body> </html>
效果：
文章僅為本人學習過程的一個記錄，僅供參考，如有問題，歡迎指出！