useScrollToTop是一个全局可用的Vue Hook，通过监听window滚动事件、提供scrollToTop函数实现全站平滑回顶，支持自动显隐控制与第三方滚动库扩展，零依赖且无状态冗余。
直接封装一个全局可用的 useScrollToTop Hook，不依赖任何 UI 库，也不需要在每个页面重复写逻辑，就能让全站任意组件一键触发平滑回顶。
核心思路：监听滚动 + 提供统一触发函数
真正的“全站唯一”，关键不在调用次数，而在行为一致性 —— 滚动目标、动画效果、触发时机都由同一个 Hook 管理。它不绑定具体 DOM 节点，而是操作 window 或 document.documentElement，天然具备全局性。
- 用
ref存储是否已启用平滑滚动（避免重复初始化） - 用
onMounted和onUnmounted控制生命周期，防止内存泄漏 - 暴露
scrollToTop函数，内部调用window.scrollTo并指定behavior: 'smooth' - 可选：自动监听
scroll事件，通过ref暴露当前滚动位置，方便做“回到顶部”按钮显隐逻辑
基础版 useScrollToTop（零依赖，开箱即用）
新建 src/hooks/useScrollToTop.ts：
import { ref, onMounted, onUnmounted } from 'vue'
export function useScrollToTop() {
const scrollTop = ref(0)
const isEnabled = ref(false)
const updateScrollTop = () => {
scrollTop.value = window.pageYOffset || document.documentElement.scrollTop
}
const scrollToTop = () => {
window.scrollTo({ top: 0, behavior: 'smooth' })
}
const init = () => {
if (isEnabled.value) return
window.addEventListener('scroll', updateScrollTop)
isEnabled.value = true
}
const destroy = () => {
if (!isEnabled.value) return
window.removeEventListener('scroll', updateScrollTop)
isEnabled.value = false
}
onMounted(init)
onUnmounted(destroy)
return {
scrollTop,
scrollToTop
}
}
在任意组件中使用：
<script setup>
import { useScrollToTop } from '@/hooks/useScrollToTop'
const { scrollTop, scrollToTop } = useScrollToTop()
</script><template><button v-if="scrollTop > 200">回到顶部</button>
</template>
增强版：支持自定义容器与取消监听
如果项目用了平滑滚动库（如 Lenis 或 Locomotive Scroll），原生 scrollTo 可能失效。这时可扩展 Hook，接受可选的滚动容器实例或取消函数：
- 传入
customScrollInstance（如lenis.scrollTo(0)） - 或传入
cancelScrollHandler，用于在组件卸载时清理第三方库监听 - 保持返回值结构一致，上层组件无需修改调用方式
为什么它能真正“全站唯一”？
这个 Hook 不创建多个实例，也不维护多份状态。所有组件调用 useScrollToTop()，拿到的都是同一套响应式逻辑和同一组事件监听器 —— 因为 Vue 的组合式函数每次调用都是独立作用域，但底层共享的是浏览器原生 window 对象和统一的事件机制。只要你不手动多次 addEventListener('scroll')，就不会出现冲突或叠加。
不需要 Vuex/Pinia 存储，也不需要 provide/inject 透传，轻量、稳定、无副作用。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
