使用a标签的href="#"属性可以返回页面顶部

最新推荐文章于 2024-06-13 21:19:05 发布

朽木自雕xmzd

最新推荐文章于 2024-06-13 21:19:05 发布

阅读量3.2k

点赞数 3

分类专栏：前端文章标签： a标签实现返回顶部

本文链接：https://blog.csdn.net/qq_16687863/article/details/102938701

版权

前端专栏收录该内容

107 篇文章 2 订阅

订阅专栏

偶然发现可以使用a标签的href="#"属性返回页面顶部，如果在加上样式，平滑滚动，那么就可以很简单的实现回到顶部，而不是使用JS，具体效果可以看这篇文章传送门

平滑滚动代码：

html{
	scroll-behavior: smooth ;
}

效果如下：

代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<!-- 这个是fontawesome5字体图标，也就是那个小箭头 -->
	<link rel="stylesheet" href="../fontawesome5/css/all.css">
	<style>
		html{
			scroll-behavior: smooth ;
		}
	</style>
	<title>test</title>
</head>
<body>
	<h1>Hello world</h1>
	<hr> 
	<!-- 100个hr标签 -->
	...
	...
	...
	<a href="#"><i class="fas fa-arrow-up"></i></a>
</body>
</html>

朽木自雕xmzd

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
使用a标签的href="#"属性可以返回页面顶部

偶然发现可以使用a标签的href="#"属性返回页面顶部，如果在加上样式，平滑滚动，那么就可以很简单的实现回到顶部，而不是使用JS，具体效果可以看这篇文章传送门平滑滚动代码：html{ scroll-behavior: smooth ;}效果如下：代码如下：<!DOCTYPE html><html lang="zh"><head&...
复制链接

扫一扫

专栏目录