jQuery插件：返回顶部/底部

经常要用到返回顶部/底部的功能，　可惜网上找的都不尽人意，　复制过来大部分都用不了，　一怒之下自己做了个。　

文件组织：

0. scrolltop.png  (背景透明)

1. Style.css

[css]   view plain copy

1. .scrolltools {  
2.     position: fixed;  
3.     top:100px;  
4.     right:10px;  
5.     display: block;  
6.     margin: -30px 0 0 2px;  
7.     width: 40px;  
8.     background: #f4f4f4;  
9.     border: 1px #cdcdcd solid;  
10.     border-radius: 3px;  
11.     border-top: 0;  
12.     cursor: pointer;  
13. }  
14. .scrolltools a {  
15.     background: url("images/scrolltop.png");  
16.     border-top: 1px solid #CDCDCD;  
17.     color: #787878;  
18.     display: block;  
19.     height: 24px;  
20.     line-height: 12px;  
21.     padding: 3px 5px;  
22.     text-align: center;  
23.     text-decoration: none;  
24.     width: 30px;  
25. }  
26. .toTop      { background-position: 0 0     !important; }  
27. .toReply    { background-position: 0 -30px !important; }  
28. .toList     { background-position: 0 -60px !important; }  
29. .toBottom   { background-position: 0 -90px !important; }  
30.   
31. .toTop:hover    { background-position: -40px 0     !important; }  
32. .toReply:hover  { background-position: -40px -30px !important; }  
33. .toList:hover   { background-position: -40px -60px !important; }  
34. .toBottom:hover { background-position: -40px -90px !important; }  

2. scroll_tools.js

[javascript]   view plain copy

1. /* 
2. Author      : yenange 
3. Description : "返回顶部/快速回复/返回列表/返回底部" 边栏功能实现 
4. Date        : 2013-11-06 
5. */  
6. (function ($) {    
7.     $.fn.scrolltools = function ( op ) {  
8.         var defaultOp = {  
9.             showToTop               : true,  
10.             showToReply             : false,  
11.             showToList              : false,  
12.             showToBottom            : true,  
13.             alwaysShowToTop         : true,  
14.             alwaysShowToBottom      : true,  
15.             hiddenTopIconHeight     : 100,  
16.             hiddenBottomIconHeight  : 100,  
17.             replayFn                : function(){ alert('进入回复'); },  
18.             listFn                  : function(){ alert('进入列表'); }   
19.         };  
20.           
21.         op = $.extend(defaultOp, op);  
22.       
23.         var $outDiv   = $(this);                    //外围div  
24.         var $toTop    = $outDiv.find(".toTop");     //返回顶部  
25.         var $toReply  = $outDiv.find(".toReply");   //快速回复  
26.         var $toList   = $outDiv.find(".toList");    //返回列表  
27.         var $toBottom = $outDiv.find(".toBottom");  //返回底部  
28.           
29.         //将设置为不显示的元素给隐藏  
30.         $toTop.toggle(op.showToTop);  
31.         $toReply.toggle(op.showToReply);  
32.         $toList.toggle(op.showToList);  
33.         $toBottom.toggle(op.showToBottom);  
34.           
35.         //将外层位置设置在页面中部  
36.         $outDiv.css( {"top" : ($(window).height())/2  });  
37.         $(window).resize(function(){  
38.             $outDiv.css( {"top" : ($(window).height())/2  });  
39.         });  
40.           
41.         //如果 [向上图标] 需要显示，但不需要一直显示 ( 离顶部距离很小时消失 )  
42.         if(op.showToTop===true && op.alwaysShowToTop===false){  
43.             $(window).scroll(function () {  
44.                 $toTop.toggle( $(window).scrollTop() > op.hiddenTopIconHeight );  
45.             });  
46.         }  
47.         //如果 [向下图标] 需要显示，但不需要一直显示 ( 离底部距离很小时消失 )  
48.         if(op.showToBottom===true && op.alwaysShowToBottom===false){  
49.             $(window).scroll(function () {  
50.                 $toBottom.toggle( op.hiddenBottomIconHeight + $(window).scrollTop() < $(document).height() - $(window).height() );  
51.             });  
52.         }  
53.         // [向上图标] 需要显示, 为其定义事件  
54.         if(op.showToTop===true){  
55.             $toTop.click(function(){  
56.                 window.scroll(0,0);  
57.             });  
58.         }  
59.         // [向下图标] 需要显示, 为其定义事件  
60.         if(op.showToBottom===true){  
61.             $toBottom.click(function(){  
62.                 window.scroll(0,$(document).height() - $(window).height());  
63.             });  
64.         }  
65.         // [快速回复] 需要显示, 为其定义事件  
66.         if(op.showToReply===true && typeof(op.replayFn)!="undefined"){  
67.             $toReply.click(function(){  
68.                 op.replayFn();  
69.             });  
70.         }  
71.         // [返回列表] 需要显示, 为其定义事件  
72.         if(op.showToList===true && typeof(op.listFn)!="undefined"){  
73.             $toList.click(function(){  
74.                 op.listFn();  
75.             });  
76.         }  
77.     }    
78. })(jQuery);  

3. 测试页面: 1.htm

[html]   view plain copy

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
2. <html xmlns="http://www.w3.org/1999/xhtml">  
3. <head>  
4.     <title>测试滚动侧边栏页面</title>  
5.     <link href="scroll_tools/css/Style.css?1" rel="stylesheet" type="text/css" />  
6.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>  
7.     <script src="scroll_tools/js/scroll_tools.js" type="text/javascript"></script>  
8.     <script type="text/javascript">  
9.         //插件调用  
10.         $(function(){  
11.             $(".scrolltools").scrolltools({ alwaysShowToTop:true, alwaysShowToBottom:true });  
12.         });  
13.     </script>  
14. </head>  
15. <body>  
16.     <div style="height:1500px;background-color:white;" >  
17.         <div class="scrolltools">  
18.             <span>  
19.                 <a title="返回顶部" class="toTop"></a>  
20.             </span>  
21.             <span>  
22.                 <a title="快速回复" class="toReply"></a>  
23.             </span>  
24.             <span>  
25.                 <a title="返回列表" class="toList"></a>  
26.             </span>  
27.             <span>  
28.                 <a title="返回底部" class="toBottom"></a>  
29.             </span>  
30.         </div>  
31.     </div>  
32. </body>  
33. </html>