Vuetify中锚点链接如何适配App Bar高度？

核心原理 #

Vuetify文档中解决该问题的核心逻辑是：让锚点滚动时自动预留出App Bar的高度空间，避免内容被固定定位的App Bar遮挡。以下是几种可行的实现方式：

方法1：CSS scroll-margin-top 全局配置 #

这是最简单直接的方案，给所有带id的锚点目标元素设置顶部滚动边距，值等于App Bar的高度：

/* 适配Vuetify默认app-bar高度（64px），自定义高度请修改对应数值 */
[id] {
  scroll-margin-top: 64px;
}

如果你的App Bar是动态高度（比如响应式变化），可以用CSS变量动态绑定：

:root {
  --app-bar-height: 64px;
}

@media (max-width: 600px) {
  :root {
    --app-bar-height: 56px;
  }
}

[id] {
  scroll-margin-top: var(--app-bar-height);
}

方法2：Vue Router 滚动行为配置 #

如果使用Vue Router进行路由导航，可以通过scrollBehavior自定义滚动偏移，精准计算App Bar高度：

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [/* 你的路由配置 */],
  scrollBehavior(to, from, savedPosition) {
    // 恢复保存的滚动位置
    if (savedPosition) {
      return savedPosition
    }
    // 处理锚点导航
    if (to.hash) {
      const appBar = document.querySelector('.v-app-bar')
      const offset = appBar ? appBar.offsetHeight : 64
      return {
        el: to.hash,
        top: offset,
        behavior: 'smooth' // 可选：开启平滑滚动
      }
    }
    // 默认滚动到顶部
    return { top: 0 }
  }
})

方法3：手动处理锚点点击事件 #

如果是通过原生a标签或自定义点击事件触发导航，可以手动计算滚动位置：

function scrollToAnchor(anchorId) {
  const target = document.getElementById(anchorId)
  if (!target) return
  const appBarHeight = document.querySelector('.v-app-bar').offsetHeight
  const targetTop = target.getBoundingClientRect().top + window.pageYOffset - appBarHeight
  window.scrollTo({
    top: targetTop,
    behavior: 'smooth'
  })
}

关键注意事项 #

1. 确保App Bar是position: fixed或position: sticky，这类定位会脱离文档流，才会出现遮挡问题；
2. 如果使用Vuetify的v-app-bar组件，默认是固定定位的，无需额外设置；
3. 动态高度的App Bar需要实时获取高度值，避免偏移错误。

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