Click the button to return to the top of the case:
code show as below:
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 is the window.onload = function () { 21 is var oBtn = document.getElementById ( ' BTN ' ); 22 is var Timer = null ; // declare a variable to store the timer 23 is var Bsys = to true ; // use variable marked out to determine whether the user scrolls 24 25 // detecting the user drags the scroll bar 26 is window.onscroll = function () { // when the scroll bar is pulled, the trigger event 27 the console.log ( 'Sliding ' ) 28 // If the user manually pulls the scroll bar, the off-timer 29 IF ( ! Bsys) { 30 the clearInterval (Timer); 31 is the console.log ( . 1 ) // [dragged manually triggered} 32 } 33 is 34 is // execution onscroll event, the value is set to false means that pull the scroll bar event for the user to manually prepare 35 Bsys = false ; 36 console.log ( 2 ) // [manual] system triggers 37 } 38 39 oBtn.onclick = function () { 40 // set the timer 41 is the console.log ( ' click ' ) 42 is Timer = the setInterval (() => { 43 is var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // Get the height of the scroll bar from the top 44 is var iSpeed = Math.floor (( 0 - scrollTop) / . 9); // Math.floor () rounds down (0-scrollTop) represents: Get the height of the scroll bar from the top negative 45 46 is Bsys = to true ; // means that the system is rolling, instead of the user 47 the console.log ( . 3 ) // [System] Trigger 48 49 document.documentElement.scrollTop = scrollTop + iSpeed; // set the distance from the top position of the scrollbar 50 51 is // when the scroll bar reaches the top of the off-timer 52 is iF (scrollTop == 0 ) { 53 is the clearInterval (timer); 54 is } 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><45br>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><59br>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>
Code explanation:
The first 42 lines of code:
When you click the button to trigger the timer. (Stored in the variable timer in the timer, for use when the timer is turned off);
The first line of code 43:
Create a variable scrollTop, scroll bars used to get the value from the top of the height;
The first line of code 44:
Create a variable iSpeed, to set the speed. [Math.floor () rounds down] [(0-scrollTop) represented by: obtaining height from the scroll bar] negative top
floor is calculated rounding down () method, which returns the function equal to or less than parameter, and the closest integer.
The first line of code 49:
Sets the scroll bar from the top position;
The first line of code 52:
when the scroll bar reaches the top of the off-timer;
The first 23 lines of code:
create a variable bSys, used to make signs to determine whether the user scrolls;
The first 26 lines of code:
detect a user, the system pull the scroll bar to trigger events;
29-32 line:
IF statement to determine, when the user manually pulls the scroll bar, performed off-timer;
The first 35 lines of code:
the variable bSys set to false, the user manually pull the scroll bar to prepare for the event; (ie: is false, bSys was true, you can trigger a shutdown timer events!)
46 line:
the variable bSys set to true, and is disposed before the first 49 lines of code, means that the system is rolling, rather than the user manually pulling the scroll bar
[// timer each time with the fastest speed: Get the height of the scroll bar, set the speed, set the scroll bar position and detection systems and determine if statement, the user drags the scroll bar]
Detect the user, the system pull the scroll bar event explained:
Reference Links: https://www.cnblogs.com/weiyf/p/6872504.html