当前位置:Gxlcms > JavaScript > javascript实现回到顶部特效

javascript实现回到顶部特效

时间:2021-07-01 10:21:17 帮助过:1人阅读

HTML:

  1. <input id="btn1" type="button" value="回到顶部" />

CSS:

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

JS:

  1. window.onload=funcition(){
  2. var oBtn=document.getElementById("btn");
  3. var timer=null;
  4. //申明一个变量看是否为系统还是用户滚动
  5. var sBys=true;
  6. window.onscroll=funcition(){
  7. if(!sBys){
  8. clearInterval(timer);
  9. }
  10. sBys=false;
  11. }
  12. oBtn.onclick=funcition(){
  13. timer = setInterval(funcition(){
  14. //获取scrollTop
  15. var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
  16. //当点击按钮回到顶部时计算缓冲速度
  17. var ispeed=Math.floor(-scrollTop/8);
  18. if(scrollTop==0){
  19. clearInterval(timer)
  20. }
  21. sBys=true;
  22. document.documentElement.scrollTop=document.body.scrollTop=scrollTop+ispeed;
  23. },30)
  24. }
  25. }

知识点:

1.计算速度(缓冲)向下取整
2.当scrollTop==0时需要清除定时器
3.需要判断是用户还是js操作滚动条,如果是用户操作就清除定时器

以上所述就是本文的全部内容了,希望大家能够喜欢。

人气教程排行