实现点击返回顶部代码,JS代码库,德仔网

代码语言

代码分类

【JS】实现点击返回顶部

作者:Dezai.CN / 发布于2013/11/2/ 487

返回顶部


	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=" utf-8">
	<meta name="author" content="http://www.softwhy.com/" />
	<title>点击返回顶部代码</title>
	<style type="text/css">
	*
	{
	 margin:0px;
	 padding:0px;
	}
	#mayi
	{
	 width:20px;
	 height:1000px;
	 background-color:green;
	 margin:0px auto;
	}
	#top
	{
	 position:fixed;
	 right:10px;
	 bottom:50px;
	 width:20px;
	 height:70px;
	 background-color:red;
	 cursor:hand;
	}
	</style>
	<script type="text/javascript">
	function myScroll()
	{
	 var x=document.body.scrollTop||document.documentElement.scrollTop;
	 var timer=setInterval(function(){
	 x=x-100;
	 if(x<100)
	 {
	 x=0;
	 window.scrollTo(x,x);
	 clearInterval(timer);
	 }
	 window.scrollTo(x,x);
	 },"10");
	}
	window.onload=function()
	{
	 var otop=document.getElementById("top");
	 otop.onclick=myScroll;
	}
	</script>
	</head>
	<div id="mayi">欢迎您</div>
	<div id="top">返回顶端</div>
	</body>
	</html>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　返回顶部　

同语言下

可能有用的

Dezai.CN贡献的其它代码(4037)