回到顶部效果

最新推荐文章于 2019-12-21 11:53:46 发布

不一于汝

最新推荐文章于 2019-12-21 11:53:46 发布

阅读量204

点赞数 3

分类专栏：回到顶部效果文章标签：回到顶部效果

本文链接：https://blog.csdn.net/wo_921110/article/details/99941679

版权

回到顶部效果专栏收录该内容

0 篇文章 0 订阅

订阅专栏

锚链接

优点：

简单快速、没有兼容性问题

缺点：

视觉上不够直观，用户体验不够好

用JavaScript制作回到顶部效果

当滚动条滚动一定距离的时候，页面就出现回到顶部的图标
点击按钮滚动条滚动到顶部

主要知识点

DOM操作：

document.getElementById 根据ID获取标签元素
document.documentElement.scrollTop 滚动条的数值，可读写

事件运用：

window.onload 页面加载完毕后触发
onclick 点击后触发
window.onscroll 滚动条滚动时触发

定时器：

setInterval() 设置定时器，需传2个参数
clearInterval() 关闭定时器，需传1个参数

用HTML + CSS实现页面布局

index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>Javascript 返回顶部</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
	<script type="text/javascript" src="script.js"></script>
</head>
<body>
	<div class="bg">
		<img src="images/bg1.jpg" alt="" />
		<img src="images/bg2.jpg" alt="" />
		<img src="images/bg3.jpg" alt="" />
		<img src="images/bg4.jpg" alt="" />
		<img src="images/bg5.jpg" alt="" />
		<img src="images/bg6.jpg" alt="" />
		<img src="images/bg7.jpg" alt="" />
	</div>
	<a href="javascript:;" id="btn" title="回到顶部"></a>
</body>
</html>

style.css:

body {
	margin-top: 15px;
	background-color: #f0f0f0;
}
.bg{
	width:1190px;margin:0 auto;
}
.bg img {
	width: 100%;
	display: block;
	margin-bottom: 15px;
	-moz-box-shadow:0px 0px 10px #000005; -webkit-box-shadow:0px 0px 10px #000005; box-shadow:0px 0px 10px #000005;
}
#btn {width:40px; height:40px; position:fixed; right:65px; bottom:10px; background:url(images/top_bg.png) no-repeat left top;}
#btn:hover {background:url(images/top_bg.png) no-repeat 0 -39px;}

script.js:

// 页面加载完毕后触发
window.onload = function () {
	var obtn = document.getElementById('btn');
	// 获取页面可视区的高度
	var clientHeight = document.documentElement.clientHeight;
	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 () {
			// 获取滚动条距离顶部的高度
			var osTop = document.documentElement.scrollTop || document.body.scrollTop;
			var ispeed = Math.floor( -osTop / 6 );
			document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
			
			isTop = true
			console.log(osTop)
			if(osTop === 0) {
				clearInterval(timer);
			}
		},30);
	}
}

不一于汝

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
回到顶部效果

锚链接优点：简单快速、没有兼容性问题缺点：视觉上不够直观，用户体验不够好用JavaScript制作回到顶部效果当滚动条滚动一定距离的时候，页面就出现回到顶部的图标点击按钮滚动条滚动到顶部主要知识点DOM操作：document.getElementById 根据ID获取标签元素 document.documentE...
复制链接

扫一扫