首页 > 代码库 > JS——给网页添加返回顶部按钮
JS——给网页添加返回顶部按钮
在页面右下方添加一个返回顶部按钮，当页面滑到一定位置时，按钮出现，否则消失，默认隐藏
代码如下：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>返回顶部</title>
6 <style type="text/css">
7 .content{ width: 100%;height: 500px; background:green; overflow: hidden; }
8 #back-to-top{ position: fixed; right: 50px;bottom: 10%; width: 44px;height: 44px; text-align: center; display: none; cursor: pointer;}
9 #back-to-top a:hover{ color: #fff; }
10 </style>
11 <script src="http://www.mamicode.com/js/jquery-1.7.2.min.js"></script>
12 </head>
13 <body>
14 <div class="content"></div>
15 <div class="content"></div>
16 <div class="content"></div>
17 <div id="back-to-top"><a href="http://www.mamicode.com/#" title="返回顶部"><img src="http://www.mamicode.com/images/top.png" width="44" height="44"></a></div>
18 <script>
19 $(function(){
20 $(‘#back-to-top‘).hide();
21 $(function(){
22 $(window).scroll(function(){
23 if($(window).scrollTop()>100){
24 $(‘#back-to-top‘).fadeIn(100);
25 }else{
26 $(‘#back-to-top‘).fadeOut(100);
27 }
28 });
29 $(‘#back-to-top‘).click(function(){
30 $(‘body,html‘).animate({scrollTop:0},300)
31 return false;
32 })
33 })
34 })
35 </script>
36 </body>
37 </html>
.fadeIn() 设置图标淡出延迟， .fadeOut()设置图标淡入（隐藏）延迟。这里要注意两者不要弄反了，初学者往往容易因为out和in的字面意思，弄反该方法的意思。
在给该图标添加一个click事件。
JS——给网页添加返回顶部按钮
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。