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	string	var(--yh-color-primary)
duration	Scroll-back animation duration (ms)	number	400

Events

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

Theme Variables

Variable	Description	Default
--yh-back-top-bg-color	Background color	#ffffff
--yh-back-top-text-color	Text/icon color	var(--yh-color-primary)