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

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

面壁思过程

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

阅读量3.7k

点赞数 5

分类专栏： html+css js 文章标签：锚点跳转位置偏移

本文链接：https://blog.csdn.net/Candy_mi/article/details/84191008

版权

js 同时被 2 个专栏收录

52 篇文章 1 订阅

订阅专栏

html+css

29 篇文章 0 订阅

订阅专栏

设置虚锚点

<!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>

面壁思过程

关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
3
评论
锚点跳转偏移位置（当顶部导航设置固定定位时挡住锚点区内容时）

设置虚锚点&lt;a name="index" style=" position: relative;top: -80px;display: block;height: 0;overflow: hidden;"&gt;&lt;/a&gt; &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt; &lt;head&gt;
复制链接

扫一扫