回到顶部效果---不断更新中

更新中。。。。。。。。。。。。buging

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}	
		/*导航*/
		ul{
			position: relative;
		}
		#nav{
			width: 680px;
			height: 60px;
			background: #000000;
			margin: 0 auto;
		}
		#nav a{
			color: #787d82;
		}
		#nav a:hover{
			color: #FFF2D1;
		}
		ul li{
			list-style:none;
			float: left;
			height: 60px;
			display: block;
			line-height: 60px;
			/*background: #c3c3c3;*/

		}
		ul li a{
			text-decoration: none;
			color: #000000;
			padding: 0 15px;
			display: block;
		}
		ul li a:hover{
			background-color:#364247; 
		}


		ul li ul {
			position: absolute;	
			display: none;
		}
		ul li ul li{
			float: none;
			margin-top: 4px;
			background-color:#4D5A61; 


		}
		ul li:hover ul{display: block;}
	</style>

	<div id="nav">
		<ul>

			<li><a href="">首页</a></li>
			<li><a href="">课程大厅</a>
				<!-- 二级 -->
				<ul>
					<li><a href="">jsjsjsjsjsjs</a></li>
					<li><a href="">java</a></li>
					<li><a href="">php</a></li>
				</ul>

			</li>
			<li><a href="">学习中心</a></li>
			<li><a href="">经典案例</a></li>
			<li><a href="">关于我们</a></li>
		</ul>

	</div>


	<style type="text/css">
		.box{
			width: 680px;
			height:1000px;
			background-color: #c3c3c3;
			margin: 0 auto;

		}


		#btn{
			width:40px;
			height: 40px;
			position: fixed;
			left: 50%;
			margin-left: 350px;
			bottom: 50px;
			background-color: red;
			background: url(./images/top_bg.png) no-repeat 0 0 ;
		}
		#btn:hover{
			background: url(./images/top_bg.png) no-repeat 0 -40px;
		}

	</style>


	<div class="box"></div>
	<!-- javascript:;阻止默认行为s -->
	<a href="javascript:;" id="btn" title="回到顶部"></a>
	<script type="text/javascript">
	// 加载完页面元素执行
		window.onload=function () {
			var obtn=document.getElementById('btn');

			// 定时器
			var timer=null;
			var istop=true;
			window.oncroll=function(){
				if (!istop) {
				clearInterval(timer);
				};
				istop=false;
			}



			obtn.onclick=function  () {

				timer=setInterval(function () {
				var osTop=document.documentElement.scrollTop||document.body.scrollTop;
				var ispeed=Math.floor(osTop/5);
				document.documentElement.scrollTop=document.body.scrollTop-=ispeed;
				if (osTop==0) {
					clearInterval(timer);
				};		
				},30);


			}

		} 


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



你可能感兴趣的:(回到顶部效果---不断更新中)