点击回到顶部

Posted 2021-01-13 hewenwu199712

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了点击回到顶部相关的知识，希望对你有一定的参考价值。

今天学习了点击回到顶部，总体感觉简单，先上完整代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.box {
				margin: 0 auto;
				text-align: center;
			}
			
			.header {
				height: 100px;
				background-color: white;
				border: 1px solid red;
			}
			
			.fixed {
				position: fixed;
				top: 0;
				margin-top: 0;
				height: 50px;
				width: auto;
				background-color: white;
				border: 1px solid red;
				padding-left: 2000px;
			}
			
			.bodyer {
				margin-top: 10px;
			}
			
			.topt {
				height: 50px;
				width: 50px;
				background-color: red;
				position: fixed;
				top: 500px;
				right: 0px;
				text-align: center;
				color: white;
				cursor: pointer;
				/*鼠标样式*/
				display: none;
			}
			
			img {
				width: 682px;
				height: 1900px;
			}
		</style>
	</head>

	<body>
		<div id="box" class="box">
			<div id="header" class="header">
				1
			</div>
			<div id="bodyer" class="bodyer">
				<img src="img/回到顶部.jpg" />
			</div>
		</div>
		<div id="topt" class="topt">
			返回</p>顶部
		</div>
		<script src="js/common.js"></script>
		<script type="text/javascript">
			//1获取元素
			var header = dgb(‘header‘);
			var bodyer = dgb(‘bodyer‘);
			var topt = dgb(‘topt‘);
			var juli = 10;
			//设置滚动大于10px时改变头部，
			window.onscroll = function() {
				var scrollTop = getScroll().scrollTop;
				if(scrollTop >= juli) {
					header.className = ‘fixed‘;
					topt.style.display = ‘block‘;
				} else {
					header.className = ‘header‘;
					topt.style.display = ‘none‘;
				}
			}
			//点击返回顶部按钮返回顶部
			var c = null;
			topt.onclick = function() {
				//判断是否有无定时器
				if(c) {
					clearInterval(c);
				}
				c = setInterval(function() {
					var target = 0; //顶部的距离
					var step = 10; //每次滚动的距离
					var curent = getScroll().scrollTop; //滚动出去的距离
					//判定有没有滚动
					if(curent > target) {
						step = -Math.abs(step);
					}

					//使页面开始一直往上滚
					curent += step;
					document.documentElement.scrollTop = curent;
					document.body.scrollTop = curent;
					//判断最后页面是不是到了最开始的位置
					if(Math.abs(curent) <= target) {
						clearInterval(c);
						document.documentElement.scrollTop = target;
						document.body.scrollTop = target;
						return;
					}
				}, 2)
			}
		</script>
	</body>

</html>

　　common.js代码如下主要解决兼容问题：

// 获取页面滚动出去的距离，处理兼容性
function getScroll(){
	return{
		scrollTop:document.documentElement.scrollTop || document.body.scrollTop,
		scrpllLeft:document.documentElement.scrpllLeft || document.body.scrollLeft
	}
}
//获取ID
function dgb(id) {
	return document.getElementById(id);
}

其中有代码是实现头部滚动后的样式因过于简单就不写了

第一步获取有用的元素和定义全局变量

其中 c 是定时器

//1获取元素
			var header = dgb(‘header‘);
			var topt = dgb(‘topt‘);
			var c = null;

第二步点击事件

　　1. 判断是否有无定时器

                            if(c) {
					clearInterval(c);
				}

　　2. 设置定时器

　　　　2.1 先创建变量

　　　　　　　　　　　　　　　　　　　　　　　　var target = 0; //顶部的距离
					var step = 10; //每次滚动的距离
					var curent = getScroll().scrollTop; //滚动出去的距离

　　　　2.2 判断页面有没有滚动，如果有使每次自动滚动的距离设置为负数为下一步回到顶部做铺垫

  　　　　　　　　　　　　　　　　　　　　　　  //判定有没有滚动
					if(curent > target) {
						step = -Math.abs(step);
					}

　　　　2.3 使页面往上一直滚动

　　　　　　　　　　　　　　　　　　　　　　　　//使页面开始一直往上滚
					curent += step;
					document.documentElement.scrollTop = curent;
					document.body.scrollTop = curent;

　　　　2.4判断最后页面是不是到了最开始的位置

　　　　　　　　　　　　　　　　　　　　　　　　　　　　//判断最后页面是不是到了最开始的位置　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　if(Math.abs(curent) <= target) {
						clearInterval(c);
						document.documentElement.scrollTop = target;
						document.body.scrollTop = target;
						return;
					}

点击事件中所有代码

　　　　　　　　　　　　　　　　　　//点击返回顶部按钮返回顶部
			topt.onclick = function() {
				//判断是否有无定时器
				if(c) {
					clearInterval(c);
				}
				c = setInterval(function() {
					var target = 0; //顶部的距离
					var step = 10; //每次滚动的距离
					var curent = getScroll().scrollTop; //滚动出去的距离
					//判定有没有滚动
					if(curent > target) {
						step = -Math.abs(step);
					}

					//使页面开始一直往上滚
					curent += step;
					document.documentElement.scrollTop = curent;
					document.body.scrollTop = curent;
					//判断最后页面是不是到了最开始的位置
					if(Math.abs(curent) <= target) {
						clearInterval(c);
						document.documentElement.scrollTop = target;
						document.body.scrollTop = target;
						return;
					}
				}, 2)
			}

以上是关于点击回到顶部的主要内容，如果未能解决你的问题，请参考以下文章