返回顶部的插件

插件 manhuatoTop.js

/***
 * 返回顶部
 * version:manhuatoTop.1.0.js
***/
$(function() {
    $.fn.manhuatoTop = function(options) {
        var defaults = {            
            showHeight : 150,
            speed : 1000
        };
        var options = $.extend(defaults,options);
        $("body").prepend("<div id='totop'><a></a></div>");
        var $toTop = $(this);
        var $top = $("#totop");
        var $ta = $("#totop a");
        $toTop.scroll(function(){
            var scrolltop=$(this).scrollTop();      
            if(scrolltop>=options.showHeight){               
                $top.show();
            }
            else{
                $top.hide();
            }
        }); 
        $ta.hover(function(){       
            $(this).addClass("cur");    
        },function(){           
            $(this).removeClass("cur");     
        }); 
        $top.click(function(){
            $("html,body").animate({scrollTop: 0}, options.speed);  
        });
    }
});

　　样式 manhuatoTop.css

*{}
#totop{position:fixed;bottom:40px;right:8px;z-index:999;width:40px; cursor:pointer; display:none;}
*html #totop{position:absolute;cursor:pointer;right:10px; display:none;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight)-112+"px")}
#totop a{display:block;width:40px;height:60px;background:url(../images/toTop.gif) no-repeat;}
#totop a.cur{background-position:-40px 0;}

　　使用方法

<script type="text/javascript" src="/static/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/static/js/manhuatoTop.1.0.js"></script>
 <link rel="stylesheet" type="text/css" href="/static/css/manhuatoTop.1.0.css">
<script type="text/javascript">
$(function (){
    $(window).manhuatoTop({
        showHeight : 100,//设置滚动高度时显示
        speed : 500 //返回顶部的速度以毫秒为单位
    });
});
 
</script>