Vue3js路由器链接到带有基于标头的偏移值的散列

Posted 2023-02-22

【中文标题】Vue3js路由器链接到带有基于标头的偏移值的散列

【英文标题】：Vue3js router link to hash with offset value based on header

【发布时间】：2021-10-17 19:30:38

【问题描述】：

我有以下情况，我想在导航菜单中创建带有散列的路由器链接，这些链接指向页面的某个部分，但标题高度的偏移量例如 300px。一切正常，除了标题顶部属性它有点被忽略。 哈希链接会转到页面上所需的位置，但不是所需的距标题 300 像素的距离。即使我将样式中的 top 属性设置为 -300px。我做错了什么？

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

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

这会导致 Home 组件中的此部分：

<section>
  <a class="anchor" id="desired-position"></a>
  <img src="../assets/pics/contact.webp"  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;

我在路由器 index.js 中的滚动行为如下：

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 

谢谢！

【参考方案1】：

您可以通过在路由器 index.js 文件中添加一个 top 属性和 el 属性来完成此操作。 Documentation

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