vue3点击按钮滚动条置顶

### Vue3 中实现点击按钮使页面滚动条回到顶部 在 Vue3 项目中，可以通过多种方式来实现在点击按钮时让页面的滚动条回到顶部。以下是几种常见的方法： #### 方法一：使用 `window.scrollTo` 函数 通过调用 JavaScript 的内置函数 `window.scrollTo()` 可以轻松地控制窗口的垂直或水平滚动位置。 ```javascript <template> <button @click="goToTop">返回顶部</button> </template> <script setup> import { defineComponent } from 'vue'; const goToTop = () => { window.scrollTo({ top: 0, behavior: "smooth" }); }; </script> ``` 这种方法简单易懂，并且支持平滑滚动效果[^1]。 #### 方法二：利用 Composition API 和 Refs 对于更复杂的场景，可以借助 Vue3 提供的新特性 Composition API 来管理状态并响应用户的交互行为。 ```javascript <template> <div ref="container"> <!-- 内容 --> <button @click="handleScrollToTop()">返回顶部</button> </div> </template> <script setup> import { onMounted, ref } from 'vue'; import { nextTick } from '@vue/runtime-core'; const container = ref(null); onMounted(() => { }); const handleScrollToTop = async () => { await nextTick(); if (container.value) { const element = container.value; element.scrollTop = 0; // 如果是单个容器内的滚动，则设置此属性即可 // 或者如果是整个页面的话还是应该用 window.scrollTo() window.scrollTo({top: 0, behavior: 'smooth'}); } } </script> ``` 这里不仅展示了如何定义组件内部的状态变量（refs），还介绍了如何结合生命周期钩子完成初始化工作以及处理异步更新后的 DOM 操作[^2]。 #### 方法三：封装成可重用 Hook 为了提高代码复用性和维护性，还可以进一步抽象逻辑至自定义 hook 中去。 ```typescript // useScroll.ts 文件 export function useScroll() { const scrollToTop = () => { window.scrollTo({ top: 0, behavior: "smooth", }); }; return { scrollToTop }; } // 组件文件 <template> <button @click="scrollToTop">返回顶部</button> </template> <script lang="ts" setup> import { useScroll } from './useScroll' const { scrollToTop } = useScroll(); </script> ``` 这种方式使得相同的业务逻辑可以在多个地方被方便地引入和使用，同时也遵循了单一职责原则[^3]。