├── img
    ├── to-top.png
    └── to-top-hover.png
├── README.md
├── back2top.css
└── back2top.js


/img/to-top.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zxlie/back2top/HEAD/img/to-top.png


--------------------------------------------------------------------------------
/img/to-top-hover.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zxlie/back2top/HEAD/img/to-top-hover.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 网页返回顶部组件（back2top）
2 | ==========================
3 | 
4 | ### 简介
5 | 基于jQuery的返回顶部控件，使用方法简单，只需要Back2top.init()即可；如果用户需要自定义样式，可以直接更改back2top.css文件
6 | 
7 | ### 详细api文档
8 | http://www.baidufe.com/component/back2top/index.html


--------------------------------------------------------------------------------
/back2top.css:
--------------------------------------------------------------------------------
 1 | /*回到顶部按钮*/
 2 | #doitbegin_Back2top {
 3 |     display:block;
 4 |     width:38px;
 5 |     height:38px;
 6 |     background:url(./img/to-top.png) no-repeat;
 7 |     position: fixed;
 8 |     _position:absolute;
 9 |     right:20px;
10 |     bottom: 20px;
11 |     z-index: 10;
12 |     cursor: pointer;
13 |     text-indent: -999em;
14 | }
15 | #doitbegin_Back2top:hover {
16 |     background:url(./img/to-top-hover.png) no-repeat;
17 | }


--------------------------------------------------------------------------------
/back2top.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 返回顶部
 3 |  *
 4 |  * @homepage    http://www.baidufe.com/component/back2top/index.html
 5 |  * @author      zhaoxianlie
 6 |  */
 7 | var Back2top = (function($,undefined){
 8 | 
 9 |     /**
10 |      * 动画时间，默认为：300ms
11 |      * @type {Number}
12 |      * @private
13 |      */
14 |     var _timeInterval = 300;
15 | 
16 |     /**
17 |      * 浏览器信息
18 |      * @type {*}
19 |      */
20 |     var browserInfo = (function(){
21 |         var userAgent = navigator.userAgent.toLowerCase();
22 |         return {
23 |             version: (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [])[1],
24 |             msie: /msie/.test( userAgent ) && !/opera/.test( userAgent )
25 |         };
26 |     })();
27 | 
28 |     /**
29 |      * 节点安装
30 |      */
31 |     var setup = function(){
32 |         /**
33 |          * 创建返回顶部的节点
34 |          * @type {*|jQuery}
35 |          */
36 |         var elBack2Top = $('<div id="doitbegin_Back2top">回到顶部</div>')
37 |             .appendTo('body')
38 |             .click(function() {
39 |                 $("html, body").animate({ scrollTop: 0 }, parseInt(_timeInterval,10) || 300);
40 |             });
41 | 
42 |         /**
43 |          * 返回顶部的处理逻辑
44 |          */
45 |         var fnBack2Top = function() {
46 |             var scrollTop = $(document).scrollTop(), winHeight = $(window).height();
47 | 
48 |             (scrollTop > 0)? elBack2Top.show(): elBack2Top.hide();
49 | 
50 |             //IE6下单独处理
51 |             if (browserInfo.msie && parseInt(browserInfo.version,10) == 6) {
52 |                 elBack2Top.css("top", scrollTop + winHeight - 150);
53 |             }
54 |         };
55 | 
56 |         // 滚动事件绑定
57 |         $(window).bind("scroll", fnBack2Top);
58 | 
59 |         fnBack2Top();
60 |     };
61 | 
62 |     /**
63 |      * 初始化，可控制动画时间
64 |      * @param {Integer}     timeInterval  动画时间，默认300ms
65 |      */
66 |     var init = function(timeInterval){
67 |         _timeInterval = timeInterval;
68 |         $(function(){
69 |             setup();
70 |         });
71 |     };
72 | 
73 |     return {
74 |         init : init,
75 |         version : '1.0'
76 |     };
77 | 
78 | })(jQuery);


--------------------------------------------------------------------------------