锚点和 ID 都无法引用页面上的特定部分

Question

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

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

这是 link 和部分代码：

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

See website here

检查 "Servicios"

下的菜单选项

顺便说一句，也一直在锚点中使用 href 而不是名称，但无济于事。

Answer 1

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

这将打开页面 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，再找name。 HTML Anchors with 'name' or 'id'?

Answer 3

感谢大家的热心回复。事实证明，这个难题的关键是某些部分没有被定义为 divs，而只是定义为 div。通过将所有这些部分分开，我让一切都按需要工作。

感谢您的支持！

锚点和 ID 都无法引用页面上的特定部分

Anchors nor ID work to reference a specific section on a page

html

anchor