BackTop

Used for long pages. Clicking the button smoothly scrolls back to the top of the page.

Basic Usage

The simplest usage, shown by default after scrolling 200px.

Scroll down the page to see the button in the bottom right corner

Basic Usage

Progress Indicator (Advanced)

YhBackTop features an industry-leading progress ring. Through the dynamic ring bar around the button, users can intuitively perceive the current physical position relative to the top of the article.

Watch the ring progress change around the button

Progress Preview

Custom Content & Styles

Customize button content through slots and adjust display position and progress bar color through props.

Observe the pink progress bar at the bottom right

Custom Content

Advanced Features

1. Kinetic Progress Ring

By syncing the page scroll height with the SVG ring circumference at high frequency, an immersive "scroll equals feedback" experience is achieved. The ring uses stroke-dashoffset linear mapping, ensuring the ultimate balance between performance and visuals.

2. Smart Viewport Adaptation

Not limited to window global scrolling. When placed inside a container with overflow: scroll combined with the target prop, it can precisely control the return logic for local areas.

3. Cubic Easing Animation

Built-in Cubic Easing function makes the scroll-back action more aligned with physical perception, giving more "weight" than simple linear displacement.

Use in Nuxt

YhBackTop is perfectly adapted for Nuxt auto-import.

Works out-of-the-box in Nuxt projects with SSR static fault tolerance

Use in Nuxt

API

Props

Prop	Description	Type	Default
visibility-height	Only shown when scroll height reaches this value	number	200
target	Container selector, not needed for full-screen scrolling	string	—
right	Distance from the right	number	40
bottom	Distance from the bottom	number	40
show-progress	Whether to show the progress ring	boolean	true
progress-color	Progress ring color; falls back to current text color when empty	string	''
duration	Scroll-back animation duration (ms)	number	400
theme-overrides	Component-level theme overrides	ComponentThemeVars	undefined

Events

Event Name	Description	Parameters
click	Triggered when button is clicked	(evt: MouseEvent)

Slots

Slot Name	Description	Slot Props
default	Custom back-to-top trigger content.	None

Expose

This component does not expose public instance methods or properties.

Theme Variables

YhBackTop supports themeOverrides, but it does not currently expose dedicated component-scoped CSS variables. Its rendered styles mainly consume shared global theme tokens such as background color, primary color, border color, and fill color.

Type Exports

Name	Description
YhBackTopProps	Props type for YhBackTop
YhBackTopEmits	Emits type for YhBackTop
YhBackTopSlots	Slots type for YhBackTop
YhBackTopInstance	Public instance type for YhBackTop