homework/孙红照/mission29/demo1.html

<!DOCTYPE html>
<html>
<head>
	<title>demo gotop</title>
	<meta charset="utf-8">
	<style type="text/css">
		.gotop li {
				height: 50px;
				line-height: 50px;
		}
		#go-top {
			position: fixed;
			bottom: 10px;
			right: 10px;
			border: 1px solid red;
			padding: 10px;
			cursor: pointer;
			display: none;
		}
	</style>
</head>
<body>
<div class="gotop">
	<li>内容1,我是顶部,我是顶部,我是顶部。</li>
	<li>内容2</li>
	<li>内容3</li>
	<li>内容4</li>
	<li>内容5</li>
	<li>内容6</li>
	<li>内容7</li>
	<li>内容8</li>
	<li>内容9</li>
	<li>内容10</li>
	<li>内容11</li>
	<li>内容12</li>
	<li>内容13</li>
	<li>内容14</li>
	<li>内容15</li>
	<li>内容16</li>
	<li>内容17</li>
	<li>内容18</li>
	<li>内容19</li>
	<li>内容20</li>
	<li>内容1</li>
	<li>内容2</li>
	<li>内容3</li>
	<li>内容4</li>
	<li>内容5</li>
	<li>内容6</li>
	<li>内容7</li>
	<li>内容8</li>
	<li>内容9</li>
	<li>内容10</li>
	<li>内容11</li>
	<li>内容12</li>
	<li>内容13</li>
	<li>内容14</li>
	<li>内容15</li>
	<li>内容16</li>
	<li>内容17</li>
	<li>内容18</li>
	<li>内容19</li>
	<li>内容20</li>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
	var goTop = (function(){
		var $goTop = $('<div id="go-top">回到顶部</div>');
		$("body").append($goTop);

		function init(){
			$(window).on("scroll", function(){
				var offsetTop = $("body").scrollTop();
				if (offsetTop > 100) {
					$goTop.show();
				} else {
					$goTop.hide();
				}
			})
			$goTop.on("click", function(){
				$(window).scrollTop(0);
			})
		}

		return {
			init: init
		}
	})();


	goTop.init();
</script>
</body>
</html>