JavaScript implementation back to top special effects _javascript Tips

Html:

<input id= "btn1" type= "button" value= "Back to Top"/>

Css:

#btn1 {position:fixed;bottom:10px;right:10px;}

Js:

Window.onload=funcition () {
  var Obtn=document.getelementbyid ("btn");
  var timer=null;
  Declare a variable to see whether it is a system or a user scrolling
  var sbys=true;
  Window.onscroll=funcition () {
    if (!sbys) {
      clearinterval (timer);
    }
    Sbys=false;
  }
  Obtn.onclick=funcition () {
    timer = setinterval (Funcition () {
      //Get scrolltop
      var scrolltop= document.documentelement.scrolltop| | Document.body.scrollTop;
      When the Click button returns to the top, compute the buffer speed of
      var ispeed=math.floor (-SCROLLTOP/8);
      if (scrolltop==0) {
        clearinterval (timer)
      }
      sbys=true;
      Document.documentelement.scrolltop=document.body.scrolltop=scrolltop+ispeed
    },30)
  }}

Knowledge Points:

1. Calculate the speed (buffer) to take down the whole
2. Need to clear timer when scrolltop==0
3. Need to determine whether the user or JS operation of the scroll bar, if it is user action to clear the timer

The above mentioned is the entire content of this article, I hope you can enjoy.