锚或ID用于引用页面上的特定部分

Question

我一直试图使用锚标记和ID来引用页面中的特定部分，但出于某种原因，我得到的只是一个空白页。无论我尝试了多少种不同的配置，我最多只能使用一个链接，然后第二个只显示一个空白页面。

一直在尝试<a href>、<a name>和使用<div ID="">，但似乎没有什么效果。有什么想法吗？

下面是链接和部分代码：

<li>
  <a href="servicios.html#distro">Distribución del espacio</a>
</li>

<section id="distro" class="section-block replicable-content bkg-charcoal color-white no-padding-bottom">
  <div class="row horizon" data-animate-in="preset:slideInRightShort;duration:1000ms;" data-threshold="0.3">
    <div class="column width-5 offset-2">
      <h2 class="mb-30"><a name="#distro">Distribución del espacio</a></h2>
    </div>
  ...

见这里的网站

检查"Servicios“下的菜单选项

顺便说一下，还在锚中使用href而不是name，但没有效果。

Answer 1

这将打开页面servicios.html，然后转到锚点#distro。

<li>
  <a href="servicios.html#distro">Distribución del espacio</a>
</li>

这将直接到锚上：

<li>
     <a href="#distro">Distribución del espacio</a>
</li>

确保您只有一个id distro

<section id="distro" ... >

你也可以尝试：

 <section name="distro" ... >

但是浏览器将首先查找id，然后查找名称。HTML锚带有“名称”或“id”？

Answer 2

<a href="#distro">Distribución del espacio</a>

<section id="distro" class="section-block replicable-content bkg-charcoal color-white no-padding-bottom">
  <div class="row horizon" data-animate-in="preset:slideInRightShort;duration:1000ms;" data-threshold="0.3">
    <div class="column width-5 offset-2">
      <h2 class="mb-30"><a href="#distro">Distribución del espacio</a></h2>
    </div>
  ...

您需要在锚上使用href，而不是name。如果目标位于同一页面上，则不需要将整个文件命名为href，只需以哈希号开头的片段命名。

Answer 3

感谢大家的友好回应。事实证明，这个谜题的关键是，有些部分没有被定义为这样，而只是定义为div。通过将所有这些部分分开，我可以根据需要完成所有的工作。

感谢你的支持！