html+css返回顶部

1，介绍
这里主要使用html5中a锚点，通过id来定位锚点。通过a的href属性来跳转到指定位置。css中使用了scroll-behavior:smooth;属性使滑动更加平滑。
2，效果图

3，html部分，这里使用的是图片快速搭建

<!-- 头部导航 -->
	<div id="nav">
		<img src="img/nav.png">
	</div>
	<!-- 首页内容 -->
	<div id="content">
		<img src="img/content.png">
	</div>
	<!-- 有好货 -->
	<div id="goods">
		<img src="img/goods.png">
	</div>
	<!-- 猜你喜欢 -->
	<div id="like">
		<img src="img/like.png">
	</div>
	<!--结束-->
	<div id="end">
		<img src="img/end.png">
	</div>
	<!-- 右侧固定定位导航 -->
	<div id="tool">
		<a href="#nav">返回<br>顶部</a>
	</div>

2，css部分，使用了定位position: fixed;属性来固定在页面右下角

html{
				/* 平滑滚动 */
				scroll-behavior:smooth;
			}
			* {
				margin: 0;
				padding: 0;
			}

			body {
				width: 100%;
			}

			img {
				width: 100%;
			}

			div {
				/* 去除图片之间的缝隙 */
				font-size: 0;
			}

			#tool {
				width: 50px;
				height: 50px;
				position: fixed;
				bottom: 50px;
				right: 3%;
				background-image: linear-gradient(135deg, #ff971b, #ff5000);
				border-radius: 10px;
			}
			a{
				width: 100%;
				height: 100%;
				text-align: center;
				padding: 5px  0 0 0;
				display: block;
				color: #ffffff;
				font-size: 15px;
				text-decoration: none;
			}

非常的简单好用！！！！

记录每一个前端小案例！！！