基本语法
创建锚点
<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
的值为相反数,这样就不会影响之前的布局