JS——BOM操作（点击按钮返回顶部案例：scrollTop的用法）

点击按钮返回顶部案例：

代码如下：

 <!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>Document</title>
     <style>
         #btn{
             background: yellow;
             position: fixed;
             width: 50px;
             height: 50px;
             right: 0;
             bottom: 0;
             margin: 20px;
         }
     </style>
     <script>
         window.onload=function(){
             var oBtn=document.getElementById('btn');
             var timer=null;             //声明一个变量来存储定时器
             var bSys=true;              //用变量来做标志，判断是否是用户滚动

             //检测用户拖动滚动条
             window.onscroll=function(){     //当拉动滚动条，触发此事件
                 console.log('滑动')
                 //若用户手动拉动滚动条，则关闭定时器
                 if(!bSys){
                     clearInterval(timer);
                     console.log(1)     //【手动拖拽会触发】
                 }

                 //执行onscroll事件时，把值设为false 意味着为用户手动拉动滚动条事件做准备
                 bSys=false;
                 console.log(2)         //【手动、系统都触发】
             }

             oBtn.onclick=function(){
                 //设置定时器
                 console.log('点击')
                 timer=setInterval(() => {
                     var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;    //获取滚动条距离顶部高度
                     var iSpeed=Math.floor((0-scrollTop)/9);        //Math.floor()向下取整   (0-scrollTop)表示：获取滚动条距离顶部高度的负值

                     bSys=true;      //意味着是系统在滚动，而不是用户
                     console.log(3)          //【系统触发】

                     document.documentElement.scrollTop=scrollTop+iSpeed;        //设置滚动条距离顶部位置

                     //当滚动条到达顶部，关闭定时器
                     if(scrollTop==0){
                         clearInterval(timer);
                     }
                 }, 30);
             }
         }
     </script>
 </head>
 <body>
     <input type="button" value="toTop" id="btn">
     <!--1-100的数字页面-->
     <div>
         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>
         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>
         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>
         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>
         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>
     </div>
 </body>
 </html>

代码解释：

第42行代码：当点击按钮，触发定时器。（把定时器存入变量timer中，以便关闭定时器时使用）；

第43行代码：创建一个变量scrollTop，用来获取滚动条距离顶部高度的值；

第44行代码：创建一个变量iSpeed，用来设置速度。　　【Math.floor()向下取整 】　　【(0-scrollTop)表示：获取滚动条距离顶部高度的负值】　　floor() 方法执行的是向下取整计算，它返回的是小于或等于函数参数，并且与之最接近的整数。

第49行代码：设置滚动条距离顶部位置；

第52行代码：当滚动条到达顶部，关闭定时器；

第23行代码：创建一个变量bSys，用来做标志，判断是否是用户滚动；

第26行代码：检测用户、系统拉动滚动条触发事件；

第29-32行代码：if语句判断,当用户手动拉动滚动条，执行关闭定时器；

第35行代码：把变量bSys设置为false，为用户手动拉动滚动条事件做准备；（即：值为false，！bSys则为true，即可触发关闭定时器事件）

第46行代码：把变量bSys设置为true，并且设置在第49行代码之前，意味着是系统在滚动，而不是用户手动拉动滚动条

【//定时器每次都以最快速度：获取滚动条高度、设置速度、设置滚动条位置 并进行if语句的判断和检测系统、用户拖动滚动条】

检测用户、系统拉动滚动条事件解释：

参考链接：https://www.cnblogs.com/weiyf/p/6872504.html