anchor 定位

当我们在阅读页面文档的时候，如果这个文档特别长，分成多级标题，这时候我们会有快速定位的需求。这时候，我们就可以利用 anchor locating 来快速实现。这是浏览器的默认行为，定位之后便会跑到页面的最顶部。

简单代码如下：

<aside>
  <ul>
    <li>
      <a href="#react">React</a>
    </li>
    <li>
      <a href="#remix">Remix</a>
    </li>
    <li>
      <a href="#next">Next</a>
    </li>
    <li>
      <a href="#svelte">Svelte</a>
    </li>
  </ul>
</aside>
<article>
  <h2 id="react">
    <a href="#react" class="header-anchor">#</a>
    React
  </h2>
  <p>Lorem ipsum dolor sit, <strong>amet consectetur adipisicing elit</strong>. Ducimus, aut animi. Labore sit
    mollitia numquam magni ipsam ex iusto maxime fuga nostrum adipisci vel alias soluta est tempore eos quos
    dolorem, corrupti quisquam ab. Velit dicta quidem, quasi eum natus incidunt numquam id amet iure in voluptate
    eligendi ipsa ducimus consectetur error aliquid deleniti odio provident tempore similique. Ipsa, eum
    dignissimos! Nam facere quae eum atque dolore dolores, distinctio vel, doloremque molestiae, iure accusantium
    minus itaque voluptatem quo. Aspernatur officiis vitae eveniet ab ducimus eos sapiente porro? Laboriosam ipsam,
    distinctio beatae reprehenderit itaque dicta reiciendis temporibus quod. Quasi, blanditiis! In.</p>
  <h2 id="remix">
    <a href="#remix" class="header-anchor">#</a>
    React
  </h2>
  <p>Lorem ipsum dolor sit, <strong>amet consectetur adipisicing elit</strong>. Ducimus, aut animi. Labore sit
    mollitia numquam magni ipsam ex iusto maxime fuga nostrum adipisci vel alias soluta est tempore eos quos
    dolorem, corrupti quisquam ab. Velit dicta quidem, quasi eum natus incidunt numquam id amet iure in voluptate
    eligendi ipsa ducimus consectetur error aliquid deleniti odio provident tempore similique. Ipsa, eum
    dignissimos! Nam facere quae eum atque dolore dolores, distinctio vel, doloremque molestiae, iure accusantium
    minus itaque voluptatem quo. Aspernatur officiis vitae eveniet ab ducimus eos sapiente porro? Laboriosam ipsam,
    distinct</p>
</article>

这样我们就利用了浏览器的默认行为，实现了最基本的定位操作。
如果我们再进一步，当前页面如果有 header 的情况下，再使用这种行为就会出现差错。

这是因为，此时页面仍然会使用默认的行为，继续定位到页面的最顶端，而如果我们想要定位到 header 的下方某个位置，我们就需要做一些额外的操作。

设置margin增加高度

默认的定位位置是当前 anchor 所占据的高度，包括所设置的 padding-top值。

这时候我们可以模拟一个额外的高度来达到想要的效果。

<h2 id="react">
  <a href="#react" class="header-anchor">#</a>
  React
</h2>

.header-anchor {
  font-size: 0;
  display: block;
  height: 100px;
  margin-top: -100px;
  visibility: hidden;
}

我们为 a 标签设置了一个特定的高度，然后在设置一个负值的 margin-top来让其归位，使用这种方法，我们便可以达到设置偏移量的效果。

设置scroll-margin-top属性

还有一个更简便的方法，我们可以给对应的标签设置 scroll-margin-top即可达到对应的效果。

<h2 id="react">
  <a href="#react" class="header-anchor">#</a>
  React
</h2>

h2 {
    scroll-margin-top: 100px;
}

这是一种更为简便的方法来实现偏移的效果。对应的兼容性也是比较好的。

使用 JS 接管默认行为

我们还可以使用 JS 来监听 hashchange事件，阻止默认行为 e.preventDefault()并使用 window.scrollTo() 来计算出特定的滚动位置。

const targetTop =
    window.scrllY + target.getBoundingClientRect().top - offset + targetPadding

这里的 offset就是我们需要手动设置的偏移量。

获取完特定的偏移量之后，我们就可以使用window.scrollTo:

window.scrollTo({
    top: targetTop,
  behavior: 'smooth'
})