一款Jquery实现非常实用的返回浏览器顶部特效

最新推荐文章于 2021-10-02 23:15:08 发布

xm1331305

最新推荐文章于 2021-10-02 23:15:08 发布

阅读量2.3k

点赞数

分类专栏： Javascript

Javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Jquery实现非常实用的置顶特效使用简单，步骤如下：
1、引用插件js和css文件

2、设置默认参数（showHeight :设置滚动高度时显示、speed :返回顶部的速度以毫秒为单位）


$(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);	
		});
	}
});

Css样式表

*{padding:0; margin:0}
body{height:2000px}
#totop{position:fixed;bottom:40px;right:10px;z-index:999;width:71px; 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:71px;height:24px;padding-top:48px;background:url(../images/toTop.gif) no-repeat;text-align:center;color:#888}
#totop a.cur{background-position:-88px 0;text-decoration:none;color:#3a9}

使用方法

<script type="text/javascript">
$(function (){
	$(window).manhuatoTop({
		showHeight : 100,//设置滚动高度时显示
		speed : 500 //返回顶部的速度以毫秒为单位
	});
});
</script>

用到的图片