[JavaScript特效]
魔趣吧原创返回顶部代码,自动加速
[复制链接]
|
改代码由魔趣吧升级原创!具备任意页面增加返回顶部按钮的功能,并且根据滚动高度自动调整返回顶部的速度和滚动高度!效果如下图:, n! F# w" {2 P! d& c
- R6 @: v/ H: j; w
\. m5 t5 [) @/ m( e/ x$ Z9 W) L
& x- V. c% Q2 c! v9 k& k+ ?& F. [& L, v/ m, `$ ?" `
演示地址:【效果演示】,实现方法,在任意页面的底部添加下面的代码即可!- <style>
- #to_top{position:fixed;top:75%;right:5%;cursor:pointer;;padding:5px;width:auto;border-radius:50%; text-align:center;border:1px solid #1886e3;background:#fff;}
- </style>
- <script>
- function pageScroll(){
- //获取scrollTop值,声明了DTD的标准网页取document.documentElement.scrollTop,否则取document.body.scrollTop;因为二者只有一个会生效,另一个就恒为0,所以取和值可以得到网页的真正的scrollTop值
- var sTop=document.documentElement.scrollTop+document.body.scrollTop;
- //把内容滚动指定的像素数(第一个参数是向右滚动的像素数,第二个参数是向下滚动的像素数)
- var sUppx=sTop/2;//根据滚动高度自动调整滚动速度
- window.scrollBy(0,-sUppx);
- //延时递归调用,模拟滚动向上效果
- scrolldelay = setTimeout('pageScroll()',100);
-
-
- //判断当页面到达顶部,取消延时代码(否则页面滚动到顶部会无法再向下正常浏览页面)
- if(sTop==0) clearTimeout(scrolldelay);
- }
- </script>
- <div id="to_top">
- <a onclick="pageScroll()" title="返回顶部">
- <i class="fa fa-arrow-circle-up fa-2x"></i>
- </a></div>
复制代码
, u: |# R/ a/ s
2 n% h5 t' E! t需要注意的是,代码默认引用了Font Awesome 字体图标效果,因此请先在头部引用!下载地址:http://fontawesome.dashgame.com- I: I# l1 F; x5 o t% W
! u% H$ h+ I6 B, \
|
|