BackTop 回到顶部

用于长页面，点击按钮后可平滑滚回页面顶部。

基础用法

最简单的用法，默认在滚动 200px 后显示。

基础用法

进度指示 (Advanced)

YhBackTop 具备行业领先的进度环特性。通过按钮外圈的动态环状条，用户可以直观地感知当前距离文章顶部的物理位置。

带进度的预览

自定义内容与样式

通过插槽可以自定义按钮内容，通过属性可以调整显示位置及进度条颜色。

自定义内容

自创高级特性

1. 环形物理感应 (Kinetic Progress)

通过高频率同步网页滚动高度与 SVG 圆环周长，实现了"滚动即反馈"的沉浸式体验。圆环采用 stroke-dashoffset 线性映射，确保性能与视觉上的极致平衡。

2. 智能容器自适应 (Smart Viewport)

不仅仅支持 window 全局滚动。如果将其放入一个具有 overflow: scroll 的局部容器中并配合 target 属性，它能精准控制局部区域的回归逻辑。

3. 三阶贝塞尔回归 (Cubic Animation)

内置 Cubic Easing 函数，滚动回归动作更符合物理感知，比简单的线性位移更有"质感"。

在 Nuxt 中使用

YhBackTop 完美适配 Nuxt 自动导入。

Nuxt 中使用

API

Props

属性名	说明	类型	默认值
visibility-height	滚动高度达到此值时才显示	number	200
target	容器选择器，全屏滚动无需设置	string	—
right	距离右侧的距离	number	40
bottom	距离底部的距离	number	40
show-progress	是否显示进度环	boolean	true
progress-color	进度环颜色，为空时跟随当前文本色	string	''
duration	回滚动画持续时间 (ms)	number	400
theme-overrides	组件级主题覆盖	ComponentThemeVars	undefined

Events

事件名	说明	参数
click	点击按钮时触发	(evt: MouseEvent)

Slots

插槽名	说明	插槽参数
default	自定义返回顶部触发内容。	无

Expose

当前组件未暴露公开实例方法或属性。

主题变量

YhBackTop 支持 themeOverrides，但当前未定义组件专属 CSS 变量，主要消费全局主题令牌，如背景色、主色、边框色和填充色。

类型导出

名称	说明
YhBackTopProps	YhBackTop props 类型
YhBackTopEmits	YhBackTop emits 类型
YhBackTopSlots	YhBackTop slots 类型
YhBackTopInstance	YhBackTop 实例类型