回到顶部效果

Posted 2020-08-13 HandsomeHan

tags:

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

回到顶部效果：

可以中途暂停，达到一屏幕才出现totop按钮，不到一屏按钮消失。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>回到顶部效果</title>
	<style>
		body {
			height: 10000px;
		}
		p {
			position: fixed;
			right: 20px;
			bottom: 20px;
			width: 50px;
			height: 50px;
			background: rgba(102,102,102,0.3);
			font-size: 18px;
			line-height: 50px;
			text-align: center;
			color: #333;
			cursor: pointer;
			display: none;
		}
		p:hover {
			background: rgba(102,102,102,1);
			color: #fff;
		}
	</style>
</head>
<body>
	<p id="totop">Totop</p>
	<script>
		window.onload = function () {
			var totop = document.getElementById(‘totop‘);
			var clientHeight = document.documentElement.clientHeight;
			console.log(clientHeight);
			var timer = null;
			var isTop = true;
			window.onscroll = function () {
				var t = document.documentElement.scrollTop || document.body.scrollTop;
				console.log(t);
				if (t >= clientHeight) {
					totop.style.display =‘block‘;
				}else if(t < clientHeight) {
					totop.style.display =‘none‘;
				}
				if(!isTop) {
					clearInterval(timer);
				}
				isTop = false;
			}
			totop.onclick = function () {
				clearInterval(timer);
				timer = setInterval(function () {
					//获取滚动条距离顶部的距离
					var t = document.documentElement.scrollTop || document.body.scrollTop;
					var speed = Math.floor(-t / 30);
					document.documentElement.scrollTop = document.body.scrollTop = t + speed;
					console.log(t - speed);
					isTop = true;
					if (t == 0) {
						clearInterval(timer);
					}
				}, 30);
			}
		}
	</script>
</body>
</html>

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