如何在Nuxt中通过哈希实现元素平滑滚动并解决相关异常问题

优先优化方案1，问题根源明确、修复成本更低，具体解决方案如下： #

方案1问题根源与修复方法 #

问题根源

你在created生命周期中获取DOM偏移值，此时页面DOM还未完全渲染、异步资源（图片、自定义字体、动态加载组件等）还未加载完成。本地开发环境因为资源有缓存、加载速度快，所以拿到的高度是正确的；部署到服务器后首次加载资源慢，created执行时Value区块的实际高度还没被内容撑开，导致后续Problem区块的offsetTop计算值偏小，后续资源加载完成后区块高度变化，但你存在Vuex里的偏移值没有更新，自然会滚动到错误位置。

修复步骤

1. 调整取值时机：将偏移值计算逻辑从created移到mounted生命周期，且确保所有静态资源加载完成后再计算，同时监听窗口大小变化动态更新数值：

mounted() {
  if (process.client) {
    // 所有资源加载完成后计算偏移
    window.addEventListener('load', this.calculateElementPositions)
    // 窗口大小变化时重新计算，适配不同分辨率
    window.addEventListener('resize', this.calculateElementPositions)
    // 如果Value区块有图片，额外监听图片加载事件更新数值
    document.querySelectorAll('#value img').forEach(img => {
      img.addEventListener('load', this.calculateElementPositions)
    })
  }
},
beforeDestroy() {
  if (process.client) {
    window.removeEventListener('load', this.calculateElementPositions)
    window.removeEventListener('resize', this.calculateElementPositions)
    document.querySelectorAll('#value img').forEach(img => {
      img.removeEventListener('load', this.calculateElementPositions)
    })
  }
},
methods: {
  calculateElementPositions() {
    this.$nextTick(() => {
      const elements = [
        {name: 'Intro', el: document.getElementById('intro')},
        {name: 'About', el: document.getElementById('about')},
        {name: 'Process', el: document.getElementById('process')},
        {name: 'Value', el: document.getElementById('value')},
        {name: 'Problem', el: document.getElementById('problem')},
        {name: 'Contact', el: document.getElementById('contact')}
      ]
      elements.forEach((element) => {
        if (!element.el) return
        // 用getBoundingClientRect计算更准确，不受offsetParent层级影响
        const rect = element.el.getBoundingClientRect()
        const posTop = rect.top + window.pageYOffset
        const elementHeight = rect.height
        const posBottom = posTop + elementHeight
        // 通过mutation更新Vuex状态，不要直接修改state
        this.$store.commit('updateWindowPosition', {
          id: element.name,
          posTop,
          posBottom
        })
      })
    })
  }
}

2. 额外兼容处理：给Value区块内的所有图片提前指定width和height属性，避免图片加载完成后突然撑开容器高度，导致偏移值变化。如果区块内有动态加载的内容，在内容加载完成的回调中再调用一次calculateElementPositions更新数值。
3. 简化滚动逻辑（可选）：点击菜单时可以直接实时计算目标元素的偏移值滚动，避免缓存的旧值出错：

scrollToSection(name) {
  if (process.client) {
    const el = document.getElementById(name.toLowerCase())
    if (!el) return
    const top = el.getBoundingClientRect().top + window.pageYOffset
    window.scrollTo({
      top,
      left: 0,
      behavior: 'smooth'
    })
  }
}

方案2可选修复方法 #

如果要继续用原生锚点方案，只要避免路由更新触发自动滚动即可：

1. 在nuxt.config.js中配置路由滚动行为，忽略滚动触发的哈希更新：

// nuxt.config.js
export default {
  router: {
    scrollBehavior(to, from, savedPosition) {
      // 只有点击菜单触发的哈希变化才滚动，滚动触发的哈希更新不滚动
      if (to.hash && window.hashChangeFromClick) {
        window.hashChangeFromClick = false
        return {
          selector: to.hash,
          behavior: 'smooth'
        }
      }
      return savedPosition || { x: 0, y: 0 }
    }
  }
}

2. 滚动监听更新哈希时用replace代替push，避免产生多余历史记录：

// 滚动监听逻辑中更新哈希
updateHash(hash) {
  if (window.location.hash !== hash) {
    this.$router.replace({ path: hash })
  }
}
// 点击菜单更新哈希前加标识，允许滚动
handleMenuClick(hash) {
  window.hashChangeFromClick = true
  this.$router.push({ path: hash })
}

最终建议 #

优先选择方案1优化，逻辑和路由完全解耦，不需要修改框架默认配置，兼容性和可控性更强，只要修复取值时机和动态更新逻辑即可解决问题。

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