homework/黄露/高级-任务1/回到顶部组件.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>回到顶部组件</title>
	<style>
		p{
			margin: 50px 0;
		}


	</style>
</head>
<body>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>


<script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js'></script>
<script>


function GoTop($ct){
   this.ct=$ct || $('body');
   this.target=$('<button class="gotopBtn">回到顶部</button>');
   this.target.css({
   	position:'fixed',
   	right: '10px',
	bottom:'10px'
   })
}
GoTop.prototype.bindEvent=function(){
	this.target.on('click',function(){
		$(window).scrollTop(0);
	});
	var $top=this.target;
	$(window).on('scroll',function(){
		if($(this).scrollTop()>100){
			$top.show();
		}else{
			$top.hide();
		}
	});
};
GoTop.prototype.createNode=function(){
	this.ct.append(this.target);
	this.target.hide();
};


var $top=new GoTop();
$top.createNode();
$top.bindEvent();

</script>
</body>
</html>