返回顶部的插件

 

插件 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>