BackTop - Vant 4

BackTop

🚀 Ready to give your users a smooth ride back to the top? Let's explore the BackTop component!

Intro 📖

A sleek and handy button that helps users effortlessly return to the top of the page! 🔝 Perfect for long content pages where scrolling back up manually would be a real workout for your thumb! 💪

Install 📦

Get started in seconds! Register the component globally via app.use - it's that simple! 🎯 Check out our Component Registration guide for more installation options.

import { createApp } from'vue'; import { BackTop } from'vant'; const app = createApp(); app.use(BackTop);

Usage 🎮

Basic Usage ⚡

Time for some magic! Scroll down on the demo page and watch the back-to-top button appear like a helpful genie! 🧞‍♂️

exportdefault { setup() { const list = [...Array(50).keys()]; return { list }; }, };

Custom Position 📍

Want to move things around? Use the right and bottom props to position your BackTop button exactly where you want it! 🎯 It's like interior decorating for your UI!

exportdefault { setup() { const list = [...Array(50).keys()]; return { list }; }, };

Custom Content 🎨

Feeling creative? Use the default slot to customize your button content! 🖌️ Make it uniquely yours with custom icons, text, or whatever your heart desires!

exportdefault { setup() { const list = [...Array(50).keys()]; return { list }; }, };

Set Scroll Target 🎯

exportdefault { setup() { const list = [...Array(50).keys()]; return { list }; }, };

Immediate Scroll ⚡

Need speed? Add the immediate prop to scroll to the top instantly - no smooth animation, just pure velocity! 🚀 Perfect for when your users are in a hurry!

API

Props

Attribute	Description	Type	Default
target	Can be a selector or a DOM ELement, default closest parent scrolling container	*string	HTMLElement*
right	Right distance of the page, the default unit is px	*number	string*
bottom	Bottom distance of the page, the default unit is px	*number	string*
offset	The component will not display until the scroll offset reaches this value	number	200
teleport	Specifies a target element where BackTop will be mounted	*string	Element*
immediate v4.0.9	Whether to scroll to top immediately	boolean	false
z-index	Set the z-index to a fixed value	*number	string*

Events

Event	Description	Arguments
click	Emitted when Component is clicked	event: MouseEvent

Slots

Name	Description
default	customize default content

Types

The component exports the following type definitions:

importtype { BackTopProps, BackTopThemeVars } from'vant';

Theming

CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

Name	Default Value	Description
--van-back-top-size	40px	-
--van-back-top-icon-size	20px	-
--van-back-top-right	30px	-
--van-back-top-bottom	40px	-
--van-back-top-z-index	100	-
--van-back-top-text-color	#fff	-

| --van-back-top-background | var(--van-blue) | - |

Related Docs 📚

• Button - Interactive button component
• Icon - Icon component for custom content