如何更新滚动上的 URL 哈希（带目录）

Question

我找到了很多关于如何在手动滚动时更新 url 哈希的答案，例如：<a href="#one">Topic 1</a>

然而，我真正想要的是当用户滚动到时更新哈希，例如：<h2><a name="one"></a>Topic 1</h2>

我有一个目录，允许用户滚动到某些标题。但我还想在用户滚动到 H2 标题时自动更新 url 哈希。

这是我在 Healthline 上追求的一个工作示例：https ://www.healthline.com/health/baby/car-seat-expiration

HTML 示例

Table Of Contents:
<a href="#one">Topic 1</a>
<a href="#two">Topic 2</a>

<h2><a name="one"></a>Topic 1</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<h2><a name="two"></a>Topic 2</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

所以基本上，当用户滚动到每个 H2 时，自动更新 url 以包含哈希值。

Answer 1

看起来很有趣所以我尝试了一下。

您的整个页面都有带有名称属性的锚点，可能位于标题标记内；假设是 H1，但任何都可以。

只需要一小段脚本即可在滚动时找到所有此类实例，并且通过使用历史记录 API 和一些字符串魔法，您可以覆盖当前位置，而不会导致页面跳转。

window.addEventListener('load', () => {
  const headings = document.querySelectorAll('h1 a[name]');
  
  document.addEventListener('scroll', (e) => {
    headings.forEach(ha => {
      const rect = ha.getBoundingClientRect();
      if(rect.top > 0 && rect.top < 150) {
        const location = window.location.toString().split('#')[0];
        history.replaceState(null, null, location + '#' + ha.name);
      }
    });
  });
});