vue滚动到指定位置,有滚动效果

// 使用 Vue 和 JavaScript 实现带有滚动效果的滚动到指定位置

<template>
  <div>
    <button @click="scrollToElement">滚动到指定元素</button>
    <div ref="targetElement" style="margin-top: 1000px;">
      这里是目标元素
    </div>
  </div>
</template>

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

      // 使用 window.scrollTo 方法实现平滑滚动
      element.scrollIntoView({
        behavior: 'smooth', // 平滑滚动效果
        block: 'start'      // 滚动到元素的顶部
      });
    }
  }
}
</script>

<style>
/* 添加一些样式以确保页面有足够的高度 */
body {
  height: 2000px;
}
</style>

解释说明：

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

   • 包含一个按钮，点击时触发 scrollToElement 方法。
   • 目标元素通过 ref="targetElement" 标记，方便在 JavaScript 中引用。

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

   • 定义了 scrollToElement 方法，该方法使用 element.scrollIntoView 实现平滑滚动效果。
   • behavior: 'smooth' 确保滚动是平滑过渡的，而不是瞬间跳转。
   • block: 'start' 表示滚动到元素的顶部对齐视口的顶部。

3. 样式部分 (<style>)：

   • 设置 body 的高度为 2000px，确保页面有足够的滚动空间。