基本語法
創(chuàng)建錨點
<a id="標題一" class="anchor"></a>
創(chuàng)建跳轉(zhuǎn)連接 其中href
填寫錨點的id
<a href="rootUrl + '#標題一'">到標題</a>
存在問題
一般我們的錨點跳轉(zhuǎn)會直接將錨點置于視窗的最頂部,也就是說錨點的上頂點會與視窗頂部重合苟径。如果這時候我們頂部有固定元素(比如導(dǎo)航之類的)案站,錨點標題就會被遮擋。
為了解決這問題棘街,我們可以使用偽類befor來為錨點標簽添加高度以消除固定元素的遮擋部分蟆盐。
.anchor::before{
display: block;
height: 6rem;
margin-top: -6rem;
visibility: hidden;
content: "";
}
具體在于使用margin-top:-6rem
來消除高度 a 標簽高度的增加對于布局的影響。一定要與height
的值為相反數(shù)遭殉,這樣就不會影響之前的布局