锚点跳转偏移位置（当顶部导航设置固定定位时挡住锚点区内容时）

最新推荐文章于 2024-06-18 14:30:05 发布

面壁思过程

最新推荐文章于 2024-06-18 14:30:05 发布

阅读量3.8k

点赞数 5

CC 4.0 BY-SA版权

文章标签：锚点跳转位置偏移

本文链接：https://blog.youkuaiyun.com/Candy_mi/article/details/84191008

js 同时被 2 个专栏收录

52 篇文章

订阅专栏

html+css

29 篇文章

订阅专栏

设置虚锚点

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>aaaaaaaaaa</title>
 
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        .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>
</head>
 
<body>
 
    <!-- 固定导航栏 -->
    <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="kong" 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="kong" style="height: 80px;width: 100%"></div>
    </div>
 
</body>
 
</html>

如果是跨页面跳转这样就可

     <a href="a.html#index" class="font-title font-active">首页</a>
        <a href="a.html#concent" class="font-title">内容</a>
        <a href="a.html#about-us" class="font-title">关于我们</a>
    </div>