返回网页顶部功能

飞鱼同学

已于 2022-04-08 22:18:45 修改

阅读量259

点赞数

于 2021-01-30 23:08:19 首次发布

本文链接：https://blog.csdn.net/qq_42487459/article/details/113448312

版权

前端页面专栏收录该内容

15 篇文章 0 订阅

订阅专栏

网页中返回网页顶部功能

实现功能：在网页高度大于设定的值之后，出现返回顶部按钮，小于则自动隐藏，点击按钮返回网页顶部，同时按钮隐藏。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>返回顶部</title>
		<style type="text/css">
			{
				padding: 0;
				margin: 0;
			}
			.con{
				height: 2000px;
			}
			.goTop{
				width: 50px;
				height: 50px;
				background-color: gray;
				text-align: center;
				line-height: 45px;
				position: fixed;
				right: 25px;
				border-radius: 25px;
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="con">
			<h2>这里是顶部</h2>
			<div class="goTop">返回</div>
		</div>
		<script type="text/javascript">
			//当高度达到400时，出现按钮，小于时隐藏
			//点击按钮时，滚动条为0
			//根据谁进行滚动 body 或 html
			let goTop = document.getElementsByClassName('goTop')[0];
			window.onscroll = function(){
				//获取高度 根据body 或 html
				let res = document.body.scrollTop || document.documentElement.scrollTop
				console.log(res);
				if (res >= 400) {
					goTop.style.display = 'block';
				}else{
					goTop.style.display = 'none';
				}				
			}
			goTop.onclick = function(){
				document.body.scrollTop = 0;
				document.documentElement.scrollTop = 0;
				
			}
		</script>
	</body>
</html>

效果展示：
图片一：网页顶部
图片二：出现按钮

完工！！！

飞鱼同学

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
返回网页顶部功能

网页中返回网页顶部功能实现功能：在网页高度大于设定的值之后，出现返回顶部按钮，小于则自动隐藏，点击按钮返回网页顶部，同时按钮隐藏。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>返回顶部</title> <style type="text/css"> { padding: 0; margin: 0; }
复制链接

扫一扫