HTML锚点定位的一些感受

基本语法

创建锚点

<a id="标题一" class="anchor"></a>

创建跳转连接 其中href 填写锚点的id

<a href="rootUrl + '#标题一'">到标题</a>

存在问题

一般我们的锚点跳转会直接将锚点置于视窗的最顶部，也就是说锚点的上顶点会与视窗顶部重合。如果这时候我们顶部有固定元素（比如导航之类的），锚点标题就会被遮挡。
为了解决这问题，我们可以使用伪类befor来为锚点标签添加高度以消除固定元素的遮挡部分。

.anchor::before{
    display: block;
    height: 6rem;
    margin-top: -6rem;
    visibility: hidden;
    content: "";
}

具体在于使用margin-top:-6rem来消除高度 a 标签高度的增加对于布局的影响。一定要与height的值为相反数，这样就不会影响之前的布局