js实现返回顶部

最新推荐文章于 2022-11-22 01:06:32 发布

u013464954

最新推荐文章于 2022-11-22 01:06:32 发布

阅读量311

点赞数

本文链接：https://blog.csdn.net/u013464954/article/details/52771445

版权

html中只要给a标签的href设为"#"，点击就可以返回顶部，不过这样没什么特效，可以用js来写

html和css部分如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#return{
				display: block;
				width: 40px;
				height: 40px;
				background-color: #d8d8d8;
				position: fixed;
				left: 50%;
				margin-left: 600px;
				bottom: 20px;
			}
			#return:hover{
				background-color: #888;
			}
		</style>
	</head>
	<body style="height: 2000px;">
		<a href="javascript:;" id="return" title="回到顶部"></a>
	</body>
</html>

js部分如下：

window.οnlοad=function (){
		var oRtn=document.getElementById('return');
		var timer=null;
		var flag=true;
		oRtn.οnclick=function (){
			move();
		}
		window.οnscrοll=function (){
		//flag为false时清除定时器，滚动条返回过程中，鼠标滚动使flag为false，返回中断停止
			if(!flag){
				clearInterval(timer);
			}
			flag=false;
		}
		function move(){
			clearInterval(timer);
			timer=setInterval(function (){
				var scoll=document.documentElement.scrollTop||document.body.scrollTop;
				var speed=Math.floor(-scoll/10);
				flag=true;
				document.documentElement.scrollTop=document.body.scrollTop=scoll+speed;
				if(scoll==0){
					clearInterval(timer);
				}
			},30)
		}
	};