在构建内容较长的单页应用时，用户滚动到页面底部后往往需要快速回到开头。Vue 3的组合式API让这类交互逻辑可以被清晰地封装与复用。返回顶部按钮的核心并不只是放一个固定定位的元素，而是解决好两个问题：什么时候显示按钮，以及点击后如何让页面平滑地滚动回去。滚动监听决定了显隐时机，缓动动画则直接影响操作的舒适感。
滚动监听的实现方式与细节处理
最常见的做法是监听window的scroll事件，在回调中读取window.scrollY或document.documentElement.scrollTop。当数值超过设定的阈值，例如300像素，就将控制显隐的响应式变量置为true。在Vue 3的setup或<script setup>中，我们可以用ref定义showBackTop，并在onMounted里添加监听，在onUnmounted中移除，避免内存泄漏。
如果页面滚动发生在某个内部容器而非整个窗口，则需要监听该容器的scroll事件，并通过ref获取DOM节点。此时要注意容器必须设置overflow-y: auto且自身有固定高度。另外，滚动事件触发频率很高，直接更新响应式数据虽不至于卡顿，但配合throttle函数能进一步降低开销。下面给出一个基础监听示例：
import { ref, onMounted, onUnmounted } from 'vue';
export function useBackTop(threshold = 300) {
const showBackTop = ref(false);
const handleScroll = () => {
const scrollTop = window.scrollY || document.documentElement.scrollTop;
showBackTop.value = scrollTop > threshold;
};
onMounted(() => {
window.addEventListener('scroll', handleScroll, { passive: true });
});
onUnmounted(() => {
window.removeEventListener('scroll', handleScroll);
});
return { showBackTop };
}
上面的代码通过passive: true告诉浏览器该监听器不会调用preventDefault，从而提升滚动性能。在实际项目中，你也可以将阈值、监听目标抽象为参数，使逻辑适配不同布局。需要注意的是，如果页面使用了路由切换，组件销毁时务必解绑事件，否则会在其他页面继续触发无用计算。
缓动动画的原理与requestAnimationFrame实践
点击返回顶部后，若直接使用window.scrollTo(0, 0)，页面会瞬间跳转，体验生硬。CSS的scroll-behavior: smooth虽能平滑滚动，但无法自定义曲线，且在部分旧浏览器中支持不佳。缓动动画的本质是根据时间进度t（从0到1）计算出当前应处的位置，常用公式如easeOutCubic：1 - Math.pow(1 - t, 3)，它能让滚动先快后慢。
实现时，我们记录点击时刻的起始滚动位置、动画总时长，然后用requestAnimationFrame循环。每一帧根据已过去的时间占比算出t，再乘缓动函数得到实际位移比例，调用window.scrollTo设置新位置。当时间达到总时长，停止循环并归位到顶部。这种方式的优势是曲线可控、兼容性好，且不会阻塞主线程。
function scrollToTop(duration = 500) {
const start = window.scrollY;
const startTime = performance.now();
const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
function step(currentTime) {
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
const value = easeOutCubic(progress);
window.scrollTo(0, start * (1 - value));
if (progress < 1) {
requestAnimationFrame(step);
}
}
requestAnimationFrame(step);
}
在Vue组件里，可以将scrollToTop绑定到按钮的点击事件。缓动函数还可以换成easeInOutQuad等，以匹配不同产品调性。需要留意的是，如果用户在动画过程中手动滚动，应该取消正在进行的requestAnimationFrame，否则会出现争抢滚动位置的抖动，可以通过一个标志变量或保存rafId并在scroll事件中取消来实现。
组件封装与不同方案的对比选择
把显隐逻辑与动画方法组合进一个可复用的Vue组件，是工程化的最优解。我们可以用<script setup>暴露showBackTop与onClick，模板中用v-show控制按钮，并加上过渡效果。组件接收threshold和duration作为props，内部调用前面写的组合函数，这样在多个页面引入时只需写一行标签。
从方案对比看，纯CSS的scroll-behavior代码量最少，但缺乏中间打断控制和曲线调整；JS缓动动画灵活却需自行处理兼容与取消逻辑；第三方库如animejs能省去手写计算，但会增加包体积。对于大多数中后台或官网项目，自研轻量组件已足够。下面用表格列出差异：
| 方案 | 实现成本 | 曲线可控 | 打断支持 |
|---|---|---|---|
| CSS smooth | 低 | 否 | 有限 |
| requestAnimationFrame | 中 | 是 | 易扩展 |
| 动画库 | 低 | 是 | 依赖API |
在封装时建议预留z-index与位置props，因为不同页面底部可能有悬浮工具栏。另外，按钮应加上aria-label以提升无障碍访问。当页面使用服务端渲染时，要确保在客户端挂载后再绑定滚动事件，防止window未定义报错。把这些细节处理好，返回顶部功能就能稳定服务于各种Vue 3项目。