JS——BOM操作（点击按钮返回顶部）
点击按钮返回顶部案例：
代码如下：
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>
代码解释：
第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语句的判断和检测系统、用户拖动滚动条】
检测用户、系统拉动滚动条事件解释：
版权声明：本文为ytraister原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。