JavaScript 实现快速回到顶部（仿淘宝页面）

最新推荐文章于 2024-03-20 05:15:31 发布

xqiitan

最新推荐文章于 2024-03-20 05:15:31 发布

阅读量1.6k

点赞数

分类专栏： h5 JavaScript

本文链接：https://blog.csdn.net/xqiitan/article/details/88891978

版权

h5 同时被 2 个专栏收录

48 篇文章 0 订阅

订阅专栏

JavaScript

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<title>Javascript 回到顶部效果</title>
		<link rel="stylesheet" type="text/css" href="style01.css" />
		<script type="text/javascript" src="script01.js"></script>
	</head>
	<body>
		<div class="box">
			<img src="http://img.mukewang.com/535e0ce800015b7511902787.jpg" />
		</div>
		<a href="javascript:;" id="btn" title="回到顶部"></a>
	</body>
</html>

#btn {
	width: 40px;
	height: 40px;
	position: fixed; /* //固定定位设置 */
	left: 50%;
	margin-left: 610px;
	bottom: 30px;
	display: none;
	background: url(http://img.mukewang.com/535e0dc100010e9c00400080.jpg) no-repeat left top;
}
#btn:hover {
	background: url(http://img.mukewang.com/535e0dc100010e9c00400080.jpg) no-repeat 0 -39px;
}
.box {
	width: 1190px;
	margin: 0 auto;
}

window.onload = function() {
	// 获取页面可视区的高度
	var clientHeight = document.documentElement.clientHeight;
	// 回到顶部，按钮
	var obtn = document.getElementById('btn');
	var timer = null;
	var isTop = true;

	// 滚动条 滚动时触发
	window.onscroll = function() {
		var osTop = document.documentElement.scrollTop || document.body.scrollTop;
		if (osTop >= clientHeight) {
			obtn.style.display = 'block'; // 显示
		} else {
			obtn.style.display = 'none'; // 隐藏
		}
		if (!isTop) {
			clearInterval(timer)
		}
		isTop = false; // 
	}

	obtn.onclick = function() {
		// 设置定时器
		timer = setInterval(function() {
			// 获取滚动条，距离顶部的高度（适配IE浏览器，google浏览器）
			var osTop = document.documentElement.scrollTop || document.body.scrollTop;
			var iSpeed = Math.floor(-osTop / 6); // 小数点，向下舍入。
			isTop = true;
			document.documentElement.scrollTop = document.body.scrollTop = (osTop + iSpeed);
			if (osTop == 0) {
				clearInterval(timer);
			}
		}, 10);
	}
}

xqiitan

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 实现快速回到顶部（仿淘宝页面）

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Javascript 回到顶部效果</title> <link rel="stylesheet" type="text/css" href="st...
复制链接

扫一扫