CSS+js 实现"回到顶部"按钮效果

最新推荐文章于 2024-10-27 22:24:41 发布

开航母的贝塔丶

最新推荐文章于 2024-10-27 22:24:41 发布

阅读量457

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/weixin_44501354/article/details/105178913

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用CSS的position:fixed属性创建一个回到顶部的按钮，该按钮固定在页面底部右侧，当用户滚动页面时始终可见。通过点击此按钮，用户可以快速返回页面顶部。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要就是使用 position: fixed; 固定到指定位置。

demo

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>回到顶部</title>
	</head>
	<style>
		#fixed{
			position: fixed;
			top: 80%;
			right: 10%;
			color: blue;
			font-size: 50px;
			font-weight: 700;
		}
		
		.lb{
			line-height: 12.5rem;
			font-size: 100px;
		}
	</style>
	<body>
		<button id="fixed" onclick="toTop()">回到顶部</button>
		<p class="lb">列表</p>
		<p class="lb">列表</p>
		<p class="lb">列表</p>
		<p class="lb">列表</p>
		<p class="lb">列表</p>
		<p class="lb">列表</p>
		<p class="lb">列表</p>
		<p class="lb">列表</p>
		<p class="lb">列表</p>
	</body>
	<script>
		function toTop(){
			scrollTo(0,0);
		}
		
	</script>
</html>