a标签锚点跳转偏移位置(当顶部导航设置固定定位时挡住锚点区内容时)

1,748 阅读1分钟

设置虚锚点

 <a name="index" style=" position: relative;top: -80px;display: block;height: 0;overflow: hidden;"></a>




<style>
  

    .nav {
        width: 70%;
        height: 80px;
        margin: 0 auto;
        background: pink;
        text-align: 80px;
        position: fixed;
        top: 0;
        z-index: 99;
    }

    .index {
        width: 100%;
        background: lightseagreen;
        height: 900px;
    }

      .concent{
        width: 100%;
        background: red;
        height: 900px;
    }

    .about-us {
        width: 100%;
        background: yellow;
        height: 900px;
    }
  
</style>
<!-- 固定导航栏 -->
<div class="nav">
    <a href="#index" class="font-title font-active">首页</a>
    <a href="#concent" class="font-title">内容</a>
    <a href="#about-us" class="font-title">关于我们</a>
</div>

<div class="empty" style="height: 80px;width: 100%"></div>
<div class="main-description">

    <!-- 设置暗锚点 -->
    <a name="index" style=" position: relative;top: -80px;display: block;height: 0;overflow: hidden;"></a>
    <!-- 真实锚点显示地方 -->
    <div class="index">首页</div>

    <a name="concent" style=" position: relative;top: -80px;display: block;height: 0;overflow: hidden;"></a>
    <div class="concent">内容</div>

    <a name="about-us" style=" position: relative;top: -80px;display: block;height: 0;overflow: hidden;"></a>
    <div class="about-us"><span>关于我们</span></div>
   
    <div class="empty" style="height: 80px;width: 100%"></div>
</div>