js:一键置顶（代码）

最新推荐文章于 2024-03-20 14:42:57 发布

一染星辰

最新推荐文章于 2024-03-20 14:42:57 发布

阅读量1.4k

点赞数

分类专栏： p2代码文章标签： java

本文链接：https://blog.csdn.net/weixin_59519449/article/details/120707735

版权

p2代码专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			body{
				height: 1000px;
			}
			button{
				position: fixed;
				right: 20px;
				bottom: 20px;
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<button type="button">回到顶部</button>
		</div>
		<script type="text/javascript">
			var btn = document.querySelector("button");
			
			// 回到顶部
			btn.onclick = function(){
				var height = document.documentElement || document.body;
				height.scrollTop = 0;
			}
			
			// 滚动事件
			window.onscroll = function(){
				// 滚动高度
				var height = document.documentElement.scrollTop || document.body.scrollTop;
				
				// 滚动高度大于500显示按钮,否则隐藏
				if(height>=500){
					btn.style.display = "block";
				}else{
					btn.style.display = "none";
				}
				
				
			}
			
			
		</script>
	</body>
</html>

一染星辰

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js:一键置顶（代码）

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } body{ height: 1000px; } button{ position: fixed; r.
复制链接

扫一扫

专栏目录