Vue.js中按钮点击滚动到指定div的正确实现方法

嘿，我来帮你搞定这个问题！你遇到的Uncaught TypeError是因为直接在原生onclick事件里调用document.getElementById时，目标元素可能还没被Vue挂载到DOM中，或者处于Vue的响应式渲染流程里还没就绪，导致返回了null。下面是几种符合Vue框架最佳实践的实现方式：

方法一：使用Vue的ref引用（强烈推荐） #

这是最符合Vue组件化思想的方式，通过ref直接获取组件内的DOM元素，避免了原生DOM查询的不确定性。

1. 给目标元素添加ref属性：

<div ref="contactMe" id="contactMe">
  <!-- 你的联系表单内容 -->
</div>

2. 给按钮绑定Vue的点击事件（替换原生onClick）：

<input 
  @click="scrollToContact" 
  type="submit" 
  class="cta-button bg-yellow mt-8 flex justify-center" 
  :value="$frontmatter.contactFormButton" 
/>

3. 在组件的methods中定义滚动方法：

export default {
  methods: {
    scrollToContact() {
      // 直接通过$refs获取元素，确保它已挂载
      this.$refs.contactMe.scrollIntoView({
        behavior: 'smooth', // 可选：开启平滑滚动
        block: 'start'      // 可选：控制滚动对齐方式，start/center/end
      })
    }
  }
}

方法二：使用$nextTick确保DOM就绪（兼容场景） #

如果你因为某些原因必须使用原生DOM查询，可以借助Vue的$nextTick方法，确保DOM已经更新完成后再执行滚动操作：

1. 绑定点击事件：

<input 
  @click="scrollToContact" 
  type="submit" 
  class="cta-button bg-yellow mt-8 flex justify-center" 
  :value="$frontmatter.contactFormButton" 
/>

2. 定义方法：

export default {
  methods: {
    scrollToContact() {
      this.$nextTick(() => {
        const targetElement = document.getElementById('contactMe')
        // 先判断元素是否存在，避免报错
        if (targetElement) {
          targetElement.scrollIntoView({ behavior: 'smooth' })
        }
      })
    }
  }
}

额外优化：平滑滚动的兼容性 #

如果需要兼容不支持behavior: 'smooth'的旧浏览器，可以考虑添加一个简单的polyfill，或者使用Vue的第三方滚动库（比如vue-scrollto），不过大部分现代浏览器已经支持原生平滑滚动了。

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