vue滚动条回到顶部

作者：叶枫殇发布日期:2026-07-27 浏览:102

// Vue 组件示例代码，用于点击按钮时将页面滚动条回到顶部

<template>
  <div>
    <button @click="scrollToTop">回到顶部</button>
  </div>
</template>

<script>
export default {
  methods: {
    scrollToTop() {
      // 使用 window.scrollTo 方法将页面滚动到顶部
      window.scrollTo({
        top: 0, // 滚动到页面的最顶部
        behavior: 'smooth' // 平滑滚动效果
      });
    }
  }
}
</script>

<style scoped>
/* 样式可以根据需要自行添加 */
</style>

解释说明：

模板部分 (<template>):
- 包含一个按钮，点击按钮时会触发 scrollToTop 方法。
脚本部分 (<script>):
- 定义了一个名为 scrollToTop 的方法，该方法使用 window.scrollTo 将页面滚动到顶部。
- top: 0 表示滚动到页面的最顶部。
- behavior: 'smooth' 表示使用平滑滚动效果，而不是立即跳转到顶部。
样式部分 (<style scoped>):
- 可以根据需要添加自定义样式。

上一篇：vue 数组清空

下一篇：vue 分割线