Make a simple return to the top with native JavaScript

Many pages have a "back to top" button underneath, especially one that doesn't have navigation at the bottom of the page, which can help visitors navigate again or revisit the ad (think it's beautiful). With the increasing use of JavaScript in recent years, the sliding effect is everywhere, so I also follow the following, will return to the top of the function made of sliding effect. Later, in order to better fit the physical characteristics, the transformation made a deceleration of the sliding effect.

First say the principle, we will get the scroll bar to the top of the page distance, and then move up a certain distance, and then get the scroll bar to the top of the page distance, move up a certain distance (smaller than the last time), and so ...  can be 500% A front-end UI framework that improves development efficiency!

<script type= "Text/javascript" >/** * back to top of page * @param acceleration acceleration * @param time interval (msec) **/function gotop (Acceleration, time)     {acceleration = acceleration | | 0.1; Time = Time | |         16;     var x1 = 0;     var y1 = 0;     var x2 = 0;     var y2 = 0;     var x3 = 0;         var y3 = 0;         if (document.documentelement) {x1 = Document.documentElement.scrollLeft | | 0; Y1 = Document.documentElement.scrollTop | |     0;         } if (document.body) {x2 = Document.body.scrollLeft | | 0; y2 = Document.body.scrollTop | |     0; } var x3 = Window.scrollx | |     0; var y3 = window.scrolly | |         0;     The horizontal distance from the scroll bar to the top of the page var x = Math.max (x1, Math.max (x2, x3));         The vertical distance from the scroll bar to the top of the page var y = Math.max (y1, Math.max (y2, y3));     Scrolling distance = current distance/speed, because the distance is smaller, the speed is greater than 1 of the number, so the rolling distance will be more and more small var speed = 1 + acceleration;         Window.scrollto (Math.floor (x/speed), Math.floor (Y/speed)); If the distance is nonzero, continue to call the iteration function if (x > 0 | | y &GT         0) {var invokefunction = "Gotop (" + Acceleration + "," + Time + ")";     Window.settimeout (invokefunction, time); }} </script>

 

Document.documentElement.scrollTop, Document.body.scrollTop, window.scrolly are actually the same, but they only work in some browsers. As for that which in which browser functions can debug itself. A front-end UI framework that can 500% improve development efficiency!

How to use?

<a href= "#" onclick= "Gotop (); return false;" >TOP</a>

 

Use native JavaScript to make a simple return to the top