如何在滚动时更新 URL 哈希（带有目录）答案

【问题标题】：How To Update URL Hash On Scroll (With Table Of Contents)如何在滚动时更新 URL 哈希（带有目录）
【发布时间】：2019-09-27 03:11:42
【问题描述】：

我找到了很多关于如何在手动滚动到时更新 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 以包含哈希。

【问题讨论】：

标签： javascript jquery html css wordpress

【解决方案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);
      }
    });
  });
});

【讨论】：

可能有更好的方法，但对我来说有点晚了:)
这很完美！最重要的是，无需更改我们当前的页面。如果用户再次滚动到页面顶部，有没有办法删除任何哈希？
我确定有。也许在页面顶部添加一个 0px x 0px div 并将其添加到查询选择器，然后 history.replaceState(null, null, location + (ha.tagName === 'a' ? '#' + ha.name : ''))（未测试）

【解决方案2】：

Table Of Contents:
<a onmouseover="urlhash('#one')" href="#one">Topic 1</a>
<a onmouseover="urlhash('#two')" 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.

function urlhash (link) {
    window.location.hash  = link;
}

【讨论】：

他想在滚动而不是鼠标悬停时更改 url 哈希。
对其进行了测试，onmouseover 会导致它在悬停时滚动到 h2，这对于目录来说不是一个很好的 UX。此外，我没有达到预期的目的，即在向下滚动而不单击目录链接的情况下使用哈希更新 url。
没有多少文字，我首先想到的是鼠标悬停。

【解决方案3】：

您可以使用History Api 并在用户滚动文档时修改哈希值。

$(function() {
    $(document).scroll(function(){
      var that = this;
      $('section').each(function () {
        if ($(that).scrollTop() >= $(this).offset().top) {
        history.replaceState("data", "title", location.origin + location.pathname + '#' +  $(this).attr('id'));
        }
      });
    });
});

HTML：

<section style="height: 900px" id="fisrt">
     <a href="#first">First</a>
</section>
<section style="height: 900px" id="example">
     <a href="#example">Example</a>
</section>
<section style="height: 900px" id="about">
      <a href="#about">About</a>
</section>

【讨论】：