Home > Web Front-end > JS Tutorial > Javascript implements back to top special effect_javascript skills

Javascript implements back to top special effect_javascript skills

WBOY
Release: 2016-05-16 16:00:48
Original
1189 people have browsed it

HTML:

<input id="btn1" type="button" value="回到顶部" />
Copy after login

CSS:

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

JS:

window.onload=funcition(){
  var oBtn=document.getElementById("btn");
  var timer=null;
  //申明一个变量看是否为系统还是用户滚动
  var sBys=true;
  window.onscroll=funcition(){
    if(!sBys){
      clearInterval(timer);
    }
    sBys=false;
  }
  oBtn.onclick=funcition(){
    timer = setInterval(funcition(){
      //获取scrollTop
      var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
      //当点击按钮回到顶部时计算缓冲速度
      var ispeed=Math.floor(-scrollTop/8);
      if(scrollTop==0){
        clearInterval(timer)
      }
      sBys=true;
      document.documentElement.scrollTop=document.body.scrollTop=scrollTop+ispeed;
    },30)
  }
}
Copy after login

Knowledge points:

1. Calculation speed (buffering) is rounded down
2. When scrollTop==0, the timer needs to be cleared
3. It is necessary to determine whether the user or js operates the scroll bar. If it is a user operation, clear the timer

The above is the entire content of this article, I hope you all like it.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template