Vue3 Router带hash跳转页面区块时头部高度偏移不生效如何解决

• 滚动逻辑冲突：你在scrollBehavior中同时执行了element.scrollIntoView()方法和返回{ el: to.hash }配置，两个滚动逻辑先后触发，最终会以路由返回的滚动位置为准，完全忽略自定义偏移。且你调用scrollIntoView时设置的block: 'end'参数是将元素底部对齐视口底部，本身就不符合顶部对齐加偏移的需求。
• 锚点样式错误：position: relative设置的top: -300px仅会让元素视觉上向上偏移，不会改变它在文档流中的实际占位坐标，浏览器定位hash锚点时取的是元素原始文档流位置，所以你的偏移样式完全不生效。

方案1：修改scrollBehavior配置（推荐，无需额外锚点元素） #

Vue Router原生支持滚动偏移配置，直接修改scrollBehavior逻辑即可，无需额外加空锚点标签：

scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return {
      el: to.hash,
      top: 300, // 此处填写需要避开的头部高度即可
      behavior: 'smooth' // 如需平滑滚动保留该配置，不需要可以删掉
    }
  } else if (savedPosition) {
    return savedPosition
  }
  return { top: 0 }
}

使用该方案你可以直接移除原来的空<a class="anchor" id="desired-position"></a>元素，把id="desired-position"直接绑定到需要跳转的<section>标签上即可。

方案2：修正锚点样式（适配你原有锚点方案） #

如果不想修改路由配置，可以调整锚点和父容器的定位规则：

1. 给跳转目标的父容器section添加相对定位：

section {
  position: relative;
}

2. 修改锚点样式为绝对定位：

.anchor {
  display: block;
  position: absolute;
  top: -300px;
  left: 0;
  visibility: hidden;
  pointer-events: none;
}

3. 删掉scrollBehavior中手动调用scrollIntoView的代码，仅保留返回{ el: to.hash }即可，避免滚动逻辑冲突。

内容的提问来源于stack exchange，提问作者Fersek