vue页面滚动到指定位置

// 在 Vue 组件中实现页面滚动到指定位置的示例代码

<template>
  <div>
    <button @click="scrollToElement">Scroll to Element</button>
    <div ref="targetElement" style="margin-top: 1000px; height: 200px; background-color: lightblue;">
      Target Element
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    scrollToElement() {
      // 获取目标元素
      const element = this.$refs.targetElement;

      // 滚动到目标元素的位置
      element.scrollIntoView({ behavior: 'smooth' });
    }
  }
}
</script>

<style scoped>
/* 样式可以根据需要进行调整 */
</style>

解释说明：

1. 模板部分 (<template>):

   • 包含一个按钮，点击时会触发 scrollToElement 方法。
   • 目标元素使用 ref="targetElement" 进行引用，并且通过 CSS 设置了一个较大的 margin-top，以便在页面上有足够的滚动空间。

2. 脚本部分 (<script>):

   • 定义了一个 scrollToElement 方法，该方法通过 this.$refs.targetElement 获取目标元素。
   • 使用 element.scrollIntoView({ behavior: 'smooth' }) 实现平滑滚动到目标元素的位置。behavior: 'smooth' 参数确保滚动是平滑过渡的，而不是瞬间跳转。

3. 样式部分 (<style scoped>):

   • 可以根据需要自定义样式，这里只是简单地给目标元素添加了背景颜色和高度，以便更容易看到滚动效果。