jquery回到页面顶部按钮

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

    .scroll-up {
        background: #dcdcdc url('up.png') no-repeat center center;
        width:48px !important;  /*for ff and other standard browser*/
        height:48px !important;
        _width: 58px;  /*for IE6 nonstandard box model*/
        _height: 58px;
        position: fixed;
        _position: absolute; /*for IE6 fixed bug*/
        opacity: .6;
        filter: Alpha(opacity=60); /*for IE opacity*/
        padding:5px; 
        cursor: pointer;
        display: none;
    
        /*css3 property for ff chrome*/
        border-radius:5px;
        -webkit-transition-property: background-color, opacity;
        -webkit-transition-duration: 1s;
        -webkit-transition-timing-function: ease;
        
        -moz-transition-property: background-color;
        -moz-transition-duration: 1s;
        -moz-transition-timing-function: ease;
    }
    .scroll-up:hover {
        background-color:#B9B9B9;
        opacity: .8;
    }

下面是jquery代码

;(function($) {
    $.scrollBtn = function(options) {
        var opts = $.extend({}, $.scrollBtn.defaults, options);

        var $scrollBtn = $('<div></div>').css({
                            bottom: opts.bottom + 'px',
                            right: opts.right + 'px'
                        }).addClass('scroll-up')
                        .attr('title', opts.title)
                        .click(function() {
                            $('html, body').animate({scrollTop: 0}, opts.duration);
                        }).appendTo('body');
                                                                            
        $(window).bind('scroll', function() {
            var scrollTop = $(document).scrollTop(),
                viewHeight = $(window).height();

            if(scrollTop <= opts.showScale) {
                if($scrollBtn.is(':visible'))
                    $scrollBtn.fadeOut(500);
            } else {
                if($scrollBtn.is(':hidden')) 
                    $scrollBtn.fadeIn(500);
            }

            if(isIE6()) {
                var top = viewHeight + scrollTop - $scrollBtn.outerHeight() - opts.bottom;
                $scrollBtn.css('top', top + 'px');
            }
        });

        function isIE6() {
            if($.browser.msie) {
                if($.browser.version == '6.0') return true;
            }
        }
    };

    /**
     * -params 
     *  -showScale: scroll down how much to show the scrollup button
     *  -right: to right of scrollable container 
     *  -bottom: to bottom of scrollable container 
     */
    $.scrollBtn.defaults = {
        showScale: 100,  
        right:10,
        bottom:10,
        duration:200,
        title:'back to top'
    }
})(jQuery);

$.scrollBtn({
    showScale: 200,
    bottom:20,
    right:20
});

下载demo