javascript - 如何在滚动时更新 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

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

您的整个页面都有带有名称属性的 anchor ，很可能在标题标签内；比方说 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);
      }
    });
  });
});