首页 > 代码库 > 回到顶部
回到顶部
回到顶部有多种实现方式：
1.通过锚点然后定位，这个比较简单，但是效果比较生硬，就不多解释了
2.通过JavaScript实现，用到了定时器，window.onload,window.onscroll,setInterval,clearInterval,document.documentElement.scrollTop||document.body.scrollTop(兼容谷歌火狐)
原理是通过监听滚动，获得实时的scrollTop，然后scrollTop-=200(常数)，这个也不多说了
3，通过jQuery实现，今天主要讲这个，首先准备一张大图，附上代码
<!doctype html><html lang="en"><head><meta charset="UTF-8" /><title>回到顶部</title><style type="text/css"> #btn {width:40px; height:40px; position:fixed; right:65px; bottom:10px; display:none; background:url(img/top_bg.png) no-repeat left top;} #btn:hover {background:url(img/top_bg.png) no-repeat 0 -39px;} .bg {width:1190px; margin:0 auto;}</style><script src="js/jquery-1.7.2.js"></script><script> $(function(){ var scrollTop=0; $(window).scroll(function(){ scrollTop=$(document).scrollTop(); var H=$(window).height(); if(scrollTop>H){ $(‘#btn‘).css({ display:‘block‘ }); }else{ $(‘#btn‘).css({ display:‘none‘ }); } }); $(‘#btn‘).click(function(){ $(‘body,html‘).animate({ scrollTop:0 },1000); }); });</script> </head><body> <a href="javascript:;" id="btn" title="回到顶部"></a> <div class="bg"> <img src="img/tb_bg.jpg" alt="" /> </div></body></html>
回到顶部
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。