HTML中a标签锚点定位偏移距离定位顶部一段位移 适配导航固定站点

2021-04-28技术经验 浏览

1.当界面需要fixed固定的标题栏时，点击对应的标题，a标签中的href就会链接到对应的内容段落里
2.标题栏随界面一直跟随，具有高度nav，在锚点定位中就会计算上nav的高度，导致被nav标题栏覆盖在下面
3.那么可以在需要跳转到的div里面加上一个暗锚，并定位到距离顶端的负距离值top（nav高度），在定位到暗锚时，就会自动空出一段距离了。

4.下面是代码部分
（1）nav标题栏：

<a href="#index" class="font-title font-active">首页</a>
<a href="#about-us" class="font-title">关于我们</a>
<a href="#btn-download" class="font-title">下载</a>

（2）跳转到的div部分以及暗锚

<div class="main-description">
  <!-- 跳转关于我们锚点-->
    <a name="about-us" style="position: relative;top: -80px;"></a>
 </div>