前言
锚点定位属于是一种比较简单且使用频繁的技能，多用在目录和正文之间的跳转。话不多说，直接上代码。
一、HTML代码
<!-- 内容 -->
<div class="content">
<h2 id="title1">标题一</h2>
<div class="placeholder"></div>
<h2 id="title2">标题二</h2>
<div class="placeholder"></div>
<h2 id="title3">标题三</h2>
<div class="placeholder"></div>
</div>
<!-- 目录 -->
<ul class="index">
<li><a href="#title1">标题一</a></li>
<li><a href="#title2">标题二</a></li>
<li><a href="#title3">标题三</a></li>
<li><a href="#">返回顶部</a></li>
</ul>
二、CSS代码
html {
scroll-behavior: smooth;
}
.index {
position: fixed;
right: 20px;
bottom: 30px;
}
.placeholder {
width: 100%;
height: 400px;
background-color: green;
}
结语
其实就是通过a标签的href属性实现锚点定位，然后设置scroll-behavior为smooth实现滚动条平滑滚动。
