小巧的返回顶部js - Forum - MY WONDERLAND

Page 1 of 1
1

小巧的返回顶部js (Make a Back To Top Button by JS)

小巧的返回顶部js

Seven

Date Th, 2013-01-03, 22:46 | Msg 1

其实最简单的返回顶部便是用position的fixed方式及锚点实现，但是这种使用js有两种优化：
1. 只有在向下滚动后出现
2. 回滚顶部有缓动过程

点击这里看效果

步骤一：在html加入返回顶部的按钮，如

<a id="goTopBtn" style="display:none">TOP</a>

这里也可以用别的标签如p div，用a是因为a的伪类金额直接用css加鼠标状态效果。
P.S. 使用内敛元素最好display置为block

步骤二：加入js脚本

function goTopEx(){
              var obj=document.getElementById("goTopBtn");
              function getScrollTop(){
                      return document.documentElement.scrollTop || (document.body ? document.body.scrollTop : 0);
                  }
              function setScrollTop(value){
                      document.documentElement.scrollTop=value;
          document.body.scrollTop=value
                  }
              window.onscroll=function(){getScrollTop()>0?obj.style.display="":obj.style.display="none";}
              obj.onclick=function(){
                  var goTop=setInterval(scrollMove,10);
                  function scrollMove(){
                          setScrollTop(getScrollTop()/1.1);
                          if(getScrollTop()<1)clearInterval(goTop);
                      }
              }
          }

别忘了在页面运行这个方法

<script type="text/javascript">goTopEx();</script>

步骤三：给按钮写个好看的style吧

小巧的返回顶部js (Make a Back To Top Button by JS)

Page 1 of 1
1