jquery回到页面顶部按钮

昨天看到一个园友的blog中有个页面下滚后出现用于"回到页面顶部"按钮的效果, 感觉挺不错的, 所以自己也写了一个, 用jQuery写是再简单不过了. 下面就直接给出代码了

 1     .scroll-up {
 2         background: #dcdcdc url('up.png') no-repeat center center;
 3         width:48px !important;  /*for ff and other standard browser*/
 4         height:48px !important;
 5         _width: 58px;  /*for IE6 nonstandard box model*/
 6         _height: 58px;
 7         position: fixed;
 8         _position: absolute; /*for IE6 fixed bug*/
 9         opacity: .6;
10         filter: Alpha(opacity=60); /*for IE opacity*/
11         padding:5px; 
12         cursor: pointer;
13         display: none;
14     
15         /*css3 property for ff chrome*/
16         border-radius:5px;
17         -webkit-transition-property: background-color, opacity;
18         -webkit-transition-duration: 1s;
19         -webkit-transition-timing-function: ease;
20         
21         -moz-transition-property: background-color;
22         -moz-transition-duration: 1s;
23         -moz-transition-timing-function: ease;
24     }
25     .scroll-up:hover {
26         background-color:#B9B9B9;
27         opacity: .8;
28     }

下面是jquery代码

 1 ;(function($) {
 2     $.scrollBtn = function(options) {
 3         var opts = $.extend({}, $.scrollBtn.defaults, options);
 4 
 5         var $scrollBtn = $('<div></div>').css({
 6                             bottom: opts.bottom + 'px',
 7                             right: opts.right + 'px'
 8                         }).addClass('scroll-up')
 9                         .attr('title', opts.title)
10                         .click(function() {
11                             $('html, body').animate({scrollTop: 0}, opts.duration);
12                         }).appendTo('body');
13                                                                             
14         $(window).bind('scroll', function() {
15             var scrollTop = $(document).scrollTop(),
16                 viewHeight = $(window).height();
17 
18             if(scrollTop <= opts.showScale) {
19                 if($scrollBtn.is(':visible'))
20                     $scrollBtn.fadeOut(500);
21             } else {
22                 if($scrollBtn.is(':hidden')) 
23                     $scrollBtn.fadeIn(500);
24             }
25 
26             if(isIE6()) {
27                 var top = viewHeight + scrollTop - $scrollBtn.outerHeight() - opts.bottom;
28                 $scrollBtn.css('top', top + 'px');
29             }
30         });
31 
32         function isIE6() {
33             if($.browser.msie) {
34                 if($.browser.version == '6.0') return true;
35             }
36         }
37     };
38 
39     /**
40      * -params 
41      *  -showScale: scroll down how much to show the scrollup button
42      *  -right: to right of scrollable container 
43      *  -bottom: to bottom of scrollable container 
44      */
45     $.scrollBtn.defaults = {
46         showScale: 100,  
47         right:10,
48         bottom:10,
49         duration:200,
50         title:'back to top'
51     }
52 })(jQuery);
53 
54 $.scrollBtn({
55     showScale: 200,
56     bottom:20,
57     right:20
58 });

下载demo