js获取滚动条距顶部距离，js实现返回顶部。

最新推荐文章于 2022-12-07 17:32:22 发布

能c能v

最新推荐文章于 2022-12-07 17:32:22 发布

阅读量2.5k

点赞数

分类专栏：原创 JavaScript

本文链接：https://blog.youkuaiyun.com/qq_43391160/article/details/104446626

版权

原创同时被 2 个专栏收录

51 篇文章

订阅专栏

JavaScript

13 篇文章

订阅专栏

1.back.js

function goTop() {
		this.top = function(obj) {
			console.log(obj)
			// 获取返回按钮
			// el 为元素节点的选择器
			var btn = document.querySelector(obj.el)
			// 获取屏幕宽度/高度
			var clientHeight = document.documentElement.clientHeight
			var clientWidth = document.documentElement.clientWidth
			console.log(clientHeight, clientWidth)

			// 定义定时器和一个判断到达顶部的布尔值
			var timer = null
			var isTop = true

			window.onscroll = function() {
				var scrTop = (document.body.scrollTop || document.documentElement.scrollTop);
				if (scrTop >= 20) {
					// 显示
					btn.style.display = 'block'
				} else {
					// 隐藏
					btn.style.display = 'none'
				}
				if (!isTop) {
					clearInterval(timer)
				}
				isTop = false
			}
			// 点击返回顶部
			btn.onclick = function() {
				// 设置定时器
				timer = setInterval(function() {
					// 再次获取滚动条距顶部高度
					var osTop = (document.body.scrollTop || document.documentElement.scrollTop);
					// 用于设置速度差,产生缓慢效果
					var speed = Math.floor(-osTop / 8);
					document.documentElement.scrollTop = document.body.scrollTop = osTop + speed
					isTop = true
					if (isTop == 0) {
						clearInterval(timer)
					}
				}, 30)
			}
		}
	}

2.调用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box {
				width: 200px;
				height: 2000px;
				background: transparent;
			}
			button {
				position: fixed;
				bottom: 20px;
				right: 20px;
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="box">
		一个很高的透明盒子
		</div>
		<button type="button" class="a" id="b">回到顶部</button>
	</body>
</html>
<script src="../js/back.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	// 实例化
	back = new goTop()
	// el 为 类名,id,属性"[type="button"]"
	back.top({
		el:'.a'
	})
</script>