javascript之点击回到页面顶部

最新推荐文章于 2024-03-19 10:15:00 发布

mr_tangshuai

最新推荐文章于 2024-03-19 10:15:00 发布

阅读量574

点赞数

本文链接：https://blog.csdn.net/mr_tangshuai/article/details/78488024

版权

html 同时被 3 个专栏收录

13 篇文章 0 订阅

订阅专栏

javascript

11 篇文章 0 订阅

订阅专栏

css

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>回到顶部案例</title>
		<style type="text/css">
			body{
				height:3000px;
			}
			#back-top{
				display: none;
				position:fixed;
				right: 20px;
				bottom: 20px;
				width: 80px;
				height: 80px;
				text-align: center;
				line-height: 80px;
				color:#fff;
				background-color: rgba(0,0,0,0.5);
				cursor:pointer;
				transition: all .5s;
			}
			#back-top:hover{
				background-color: rgba(0, 120, 215,0.8);
			}
		</style>
	</head>
	<body>
		<div id="back-top">
			回到顶部
		</div>
		<h1 style="text-align: center;">标题</h1>
		<h3 style="margin-top:2980px;text-align: center;">底部内容</h3>
		<script>
			//监控文档中发生的滚动事件
			document.οnscrοll=function(){
				//获取滚动条距离顶部的位置
				var st = document.body.scrollTop ||  document.documentElement.scrollTop;
				if(st > 80){
					//显示 回到顶部 链接
					$('back-top').style.display='block';
				}else{
					//隐藏 回到顶部 链接
					$('back-top').style.display='none';
				}
			}
			
			//点击按钮返回顶部
			$('back-top').οnclick=function(){
				
				timer = setInterval(function(){
					//不断获取最新滚动条距离顶部的高度
					var t = document.body.scrollTop ||  document.documentElement.scrollTop;
					t = t- t/10;
					if(t <= 0){
						//结束定时任务
						clearInterval(timer);
					}
					document.body.scrollTop = document.documentElement.scrollTop= t;
				},20);
			}
			
			//简易封装
			function $(id)
			{
				return document.getElementById(id);
			}
		</script>
	</body>
</html>