Vue3js路由器链接到哈希，偏移量值基于标头

Question

我有以下情况，我想在导航菜单中创建带有哈希的路由器链接，这些哈希指向页面的某个部分，但带有页眉高度的偏移量，例如300px。除了header top属性被忽略之外，其他一切都正常工作。哈希链接到达页面上所需的位置，但不是所需的300px offest from标头。即使我将样式中的top属性设置为-300px。我做错了什么？

我的Header组件中的示例链接：

<router-link :to="{ name: 'Home', hash: '#desired-position' }">LINK</router-link>

这将导致Home component中的此部分：

<section>
  <a class="anchor" id="desired-position"></a>
  <img src="../assets/pics/contact.webp" alt="contact" class="contact-img" />
  <div class="content">
    <h2>Header</h2>
     <p>Lorem ipsum</p>
  </div>
</section>

我把锚设计成这样：

 .anchor {
  display: block;
  position: relative;
  top: -300px; // Header Height
  visibility: hidden;
}

我在路由器索引中的滚动行为。详情如下:

scrollBehavior (to, from, savedPosition) {
if (to.hash) {
  const element = document.getElementById(to.hash.replace(/#/, ''))
  if (element && element.scrollIntoView) {
    element.scrollIntoView({ block: 'end', behavior: 'smooth' })
  }
  return { el: to.hash }
} else if (savedPosition) {
  return savedPosition
}
return { top: 0 }

非常感谢。

Answer 1

您可以通过在路由器index.js文件中添加top属性和el属性来实现这一点。文献资料

scrollBehavior(to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition;
  }
  if (to.hash) {
    return { el: to.hash, top: 300 };
  }
  return { x: 0, y: 0 };
}