在页面右下方添加一个返回顶部按钮，当页面滑到一定位置时，按钮出现，否则消失，默认隐藏
代码如下：
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="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="#" title="返回顶部"><img src="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事件。
时间： 2024-12-25 22:33:55