JS——BOM操做（點擊按鈕返回頂部案例：scrollTop的用法）

時間 2019-12-06

標籤 bom 點擊按鈕返回頂部案例 scrolltop 用法欄目 JavaScript 简体版

原文原文鏈接

點擊按鈕返回頂部案例：

代碼以下：html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">           
 7     <title>Document</title> 
 8     <style>
 9         #btn{
10             background: yellow;
11             position: fixed;
12             width: 50px;
13             height: 50px;
14             right: 0;
15             bottom: 0;
16             margin: 20px;
17         }
18     </style>    
19     <script>
20         window.onload=function(){
21             var oBtn=document.getElementById('btn');
22             var timer=null;             //聲明一個變量來存儲定時器
23             var bSys=true;              //用變量來作標誌，判斷是不是用戶滾動
24 
25             //檢測用戶拖動滾動條
26             window.onscroll=function(){     //當拉動滾動條，觸發此事件
27                 console.log('滑動')
28                 //若用戶手動拉動滾動條，則關閉定時器
29                 if(!bSys){
30                     clearInterval(timer);
31                     console.log(1)     //【手動拖拽會觸發】
32                 }
33 
34                 //執行onscroll事件時，把值設爲false 意味着爲用戶手動拉動滾動條事件作準備
35                 bSys=false;
36                 console.log(2)         //【手動、系統都觸發】
37             }
38 
39             oBtn.onclick=function(){
40                 //設置定時器
41                 console.log('點擊')
42                 timer=setInterval(() => {
43                     var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;    //獲取滾動條距離頂部高度
44                     var iSpeed=Math.floor((0-scrollTop)/9);        //Math.floor()向下取整   (0-scrollTop)表示：獲取滾動條距離頂部高度的負值
45 
46                     bSys=true;      //意味着是系統在滾動，而不是用戶
47                     console.log(3)          //【系統觸發】
48 
49                     document.documentElement.scrollTop=scrollTop+iSpeed;        //設置滾動條距離頂部位置
50 
51                     //當滾動條到達頂部，關閉定時器
52                     if(scrollTop==0){
53                         clearInterval(timer);
54                     }
55                 }, 30);
56             }
57         }
58     </script>
59 </head>
60 <body>
61     <input type="button" value="toTop" id="btn">
62     <!--1-100的數字頁面-->
63     <div>
64         1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br>10<br>  <br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>  <br>
65         21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br>  <br>31<br>32<br>33<br>34<br>35<br>36<br>37<br>38<br>39<br>40<br>  <br>
66         41<br>42<br>43<br>44<br>45<br>46<br>47<br>48<br>49<br>50<br>  <br>51<br>52<br>53<br>54<br>55<br>56<br>57<br>58<br>59<br>60<br>  <br>
67         61<br>62<br>63<br>64<br>65<br>66<br>67<br>68<br>69<br>70<br>  <br>71<br>72<br>73<br>74<br>75<br>76<br>77<br>78<br>79<br>80<br>  <br>
68         81<br>82<br>83<br>84<br>85<br>86<br>87<br>88<br>89<br>90<br>  <br>91<br>92<br>93<br>94<br>95<br>96<br>97<br>98<br>99<br>100<br>
69     </div>
70 </body>
71 </html>