当前位置: 首頁 > javascript > 一款常见的滚动返回顶部插件

一款常见的滚动返回顶部插件

一个简单的很常见的应用范围很广的滚动回顶部效果。

示例请向下滚动看页面右下角。

JQ插件源码

$.fn.go_top=function(){
	//声明
	var obj=$(this);
	obj.speed=10;
	obj.div_w=$(obj).width();
	obj.div_h=$(obj).height();
	
	//初始化
	btn_show();
	get_wh();
	
	//获取宽高函数
	function get_wh(){
		obj.width=$(window).width();
		obj.height=$(window).height();
		$(obj).css({left:obj.width-obj.div_w*2,top:obj.height-obj.div_h*3});
	};
	//按钮出现函数
	function btn_show(){
	  var x=$(window).scrollTop();
	  if(x>obj.height/2){
		  $(obj).fadeIn(250);
	  }else{
		  $(obj).fadeOut(250);
	  };
	};
	//滚动事件
	$(window).scroll(function(){
		btn_show();
	 });
	//窗口宽高重置事件
	$(window).resize(function(){
		get_wh();
	 });
	//返回事件
	$(obj).click(function(){
		var x=$(window).scrollTop()-0;
		var s=setInterval(function(){
			x-=100;
			if(x>0){
				$(window).scrollTop(x);
			}else if(x<0){
				$(window).scrollTop(0);
				clearInterval(s);
			}else{
				clearInterval(s);
			};
		},obj.speed);
	});
};

插件调用代码

$(document).ready(function(){
	$('.go_top').go_top();
})
评论 ( 0 )

网友留言