返回顶部功能模块

最新推荐文章于 2024-10-11 17:39:47 发布

sparrow_girl

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量124

点赞数

分类专栏： HTML+CSS JS

本文链接：https://blog.csdn.net/qq_51053759/article/details/119959398

版权

html5 javascript css

JS 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

HTML+CSS

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>返回顶部</title>
		<style type="text/css">
			body{
				height: 2000px;
				position: relative;
			}
			#box{
				width: 50px;
				height: 50px;
				line-height: 50px;
				background-color: aqua;
				color: #fff;
				text-align: center;
				position: fixed;
				right: 10px;
				bottom: 200px;
				cursor: pointer;
				display: none;
			}
		</style>
		<script type="text/javascript">
			// 窗口加载事件
			window.onload=function(){
				/*
				功能分析：
					1、滚动条滚动到指定位置显示或隐藏返回顶部按钮(事件源：window)
					2、点击返回顶部按钮实现滚动条回到顶部(事件源：box)
				*/
			   // 给window对象绑定滚动事件
			    window.addEventListener('scroll',function(){
					// 获取滚动条距离顶部的位置
					let sTop=document.documentElement.scrollTop||
					document.body.scrollTop
					// 判断按钮的显示和隐藏
					if(sTop>=500){
						box.style.display='block'
					}else{
						box.style.display='none'
					}
				})
				// 给按钮绑定点击事件
				box.addEventListener('click',function(){
					// 设置定时器动态回到顶部
					let timeId=setInterval(function(){
						// 动态获取滚动条距离顶部的距离
						let sTop=document.documentElement.scrollTop||
						document.body.scrollTop
						// 进行值操作
						document.documentElement.scrollTop=sTop-10
						document.body.scrollTop=sTop-10
						// 判断滚动条是否回到顶部
						if(sTop<=0){
							clearInterval(timeId)
						}
					},10)
				})
			}
		</script>
	</head>
	<body>
		<div id="box">
			返回
		</div>
	</body>
</html>