RicardoWee 2022-01-29 01:19 采纳率: 58.3%
浏览 44
已结题

如何在有顶栏的页面实现精准锚点跳转？

最近学html，锚点。实际进百度词条里，有个悬挂在顶部，如果还是按照老一套的定义一个"#2"锚点，再在下面指定的div处引用，那么确实能跳到div所在处，但因为该跳转默认是处于当前显示页面顶层，就导致实际上顶部导航栏就会遮挡住所跳转选择的div块。

img

img

我看百度在这写的虽然定义了锚点"#2"，但是下方似乎是定义了一个高度为0的锚点列表div块，然后再在里面标记使得跳转至此处。可我查询标签的时候，不是文档上说name属性已经被废除了么？难道废除特性也能接着用不影响的嘛？

另外就是如果在这个锚点块只是单纯增加一行id="2"似乎也是会出现顶栏遮盖的情况，难道后面的那个class能够根据顶栏范围设定，使得锚点跳跃时固定空出那么点距离看上去不被遮盖？

img

img

不过想想如果这里用了id来标识的话，似乎之后侧面锚点就不能用了吧？我记得id是整个页面只能用一次的……这么看来新增特性也没能完全替代老特性啊。

img

<div class="anchor-list ">
    <!-- <a id="2"></a> 这里是我自己试着直接用id的，结果是就会想上面那样被遮盖住 -->
    <!-- 只有同时增加下面这个“2”后面的class，才能实现精确跳转…… -->
<a name="2" class="lemma-anchor para-title"></a>
<a name="sub8007479_2" class="lemma-anchor "></a>
<a name="详细释义" class="lemma-anchor "></a>
</div>
  • 写回答

1条回答 默认 最新

  • 归来巨星 前端领域新星创作者 2022-01-29 09:16
    关注

    name 属性有被废除嘛？这个确实没有了解过，不过喵点跳转确实是可以使用两种方式跳转的
    一种是 id 跳转
    一种是 name 跳转（但是设置name的标签好像只能是a标签，不然会出现跳转失效的可能）

    我大体参照你所说的意思在百度百科上面试了一下，你使用id、name两种方式都是可以实现跳转的，你现在说的被遮住的意思，应该是会跳转过去的，但是被上面的nav条遮住了 是因为class 设置了 -50px 的定位，减去了导航栏的高度

    img

    再有就是两者同时存在的优先级问题

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        z-index: 1 !important;
      }
      p {
        position: relative;
        z-index: 1000;
      }
    </style>
  </head>
  <body>
    <a href="#1">跳转</a>

    <div style="width: 100%; height: 2200px"></div>

    <div id="1">id</div>
    //使用id1 来标记该DIV

    <div style="width: 100%; height: 2200px"></div>
    <a name="1">name</a> //使用name1 来标记该DIV
  </body>
</html>

    测试的结果是 id的优先级要高于 name 的优先级的 所以会出现同时存在，但是你的被遮住的问题

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录

报告相同问题？

问题事件

  • 系统已结题 2月6日
  • 已采纳回答 1月29日
  • 创建了问题 1月29日