使用锚点定位到网页的指定位置，设置偏移量错开一些固定布局的元素

我们常用的锚点实现方式有几种：a 标签跳转，直接修改 url 的 hash 值，使用 scrollIntoView 方法，使用 window.scrollTo 方法。

对于一些特殊的场景，我们会有一些元素固定到页面的顶部，比如导航栏，工具栏之类的，这种场景下我们的锚点定位时元素会与固定元素重叠，导致锚点定位不准确的错觉，像使用a 标签跳转和直接修改 url 的 hash 值以及 scrollIntoVIew 定位到顶部时都会有这种问题。

这种情况下就需要设置偏移量，让锚点元素与固定元素错开，以达到定位准确的效果。

a 标签锚点以及直接修改 url 的 hash 值实现锚点

借鉴被别人的方式，给目标元素设定 padding 和 margin 来偏移锚点元素，示例代码如下：

// html 代码
<a href="#box">box</a>
<div class="box" id="box">
    1<br />2<br />
</div>

// css 代码
.box {
  padding-top: 50px;
  margin-top: -50px;    
}

但是我试了下，在我的项目里面没有效果，我同事写了个demo倒是可以达到偏移的效果，没有去细究我项目里面不行的原因，直接使用了window.scrollTo 方法来实现，没毛病。

使用 scrollIntoView 方法实现锚点

scrollIntoView 支持三种定位方式：

• start：元素的顶端将和其所在滚动区的可视区域的顶端对齐
• center：元素的中间位置将和其所在滚动区的可视区域的中间位置对齐
• end：元素的底端将和其所在滚动区的可视区域的底端对齐
• nearest：

具体方法参数可参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView

此方式不能配置具体的偏移量，只能是上中下三个位置，灵活性不够，也不能实现我们的需求

使用 window.scrollTo 方法实现锚点

可以指定具体的偏移量，示例代码如下：

 const headerOffset = 120;
 const elementPosition = element.getBoundingClientRect().top;
 const offsetPosition = elementPosition + window.pageYOffset - headerOffset;

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