欢迎大家来到IT世界,在知识的湖畔探索吧!
很久都没有去慕课网学习学习了,刚恰好就看见了一个用的比较多的小例子——页面回到顶部,记得之前自己也是在初学web时,被这个坑了一回,因此今天特地拿来分享分享……
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面回到顶部</title> <link rel="stylesheet" type="text/css" href="mycss.css"> <script type="text/javascript" src="myjs.js"></script> </head> <body> <a href="javascript:;" id="btn" title="回到顶部"></a> <div class="bg"> <img src="images/tb_bg.jpg" alt="" /> </div> </body> </html>
欢迎大家来到IT世界,在知识的湖畔探索吧!
其中需要引入自己写的一个样式文件和一个js文件:
欢迎大家来到IT世界,在知识的湖畔探索吧! #btn { width: 40px; height: 40px; position: fixed; display: none; right: 65px; bottom: 10px; background: url(images/top_bg.png) no-repeat left top; } #btn:hover { background: url(images/top_bg.png) no-repeat 0 -39px; } .bg { width: 1190px; margin: 0 auto; }
js文件:
//页面加载完毕后触发 window.onload = function { var obtn = document.getElementById('btn'); var clientHeight=document.documentElement.clientHeight;//获取页面可视区域的高度 var timer = null; //存放定时器 var isTop=true; //滚动条滚动时触发 window.onscroll=function{ var osTop = document.documentElement.scrollTop || document.body.scrollTop; if(osTop>=clientHeight){ obtn.style.display="block"; }else{ obtn.style.display="none"; } if(!isTop){ clearInterval(timer); } isTop=false; } obtn.onclick = function { timer = setInterval(function { //设置定时器 //获取滚动条距离顶部的高度 var osTop = document.documentElement.scrollTop || document.body.scrollTop; var ispeed=osTop/5; document.documentElement.scrollTop = document.body.scrollTop =osTop-ispeed; isTop=true; if(osTop==0){ clearInterval(timer); } }, 30); } }
文件存放路径:
基本“回到顶部”效果就这样子实现,只是我不会在文章中添加动态效果(就是实时的添加这个动态效果图),求大神赐教!
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/49832.html