/*! For license information please see 9728.21a47b95.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["9728"],{39297:function(s,n,a){"use strict";a.r(n);var t=a("80681");let l=["innerHTML"];n.default={setup:()=>({html:""}),render:()=>((0,t.wg)(),(0,t.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

BackTop

\n

Intro

\n

A button to back to top.

\n

Install

\n

Register component globally via app.use, refer to Component Registration for more registration ways.

\n
import { createApp } from 'vue';\nimport { BackTop } from 'vant';\n\nconst app = createApp();\napp.use(BackTop);\n
\n

Usage

\n

Basic Usage

\n

Please scroll the demo page to display the back top button.

\n
<van-cell v-for="item in list" :key="item" :title="item" />\n\n<van-back-top />\n
\n
export default {\n  setup() {\n    const list = [...Array(50).keys()];\n    return { list };\n  },\n};\n
\n

Custom Position

\n

Using right and bottom props to set the position of BackTop component.

\n
<van-cell v-for="item in list" :key="item" :title="item" />\n<van-back-top right="15vw" bottom="10vh" />\n
\n
export default {\n  setup() {\n    const list = [...Array(50).keys()];\n    return { list };\n  },\n};\n
\n

Custom Content

\n

Using the default slot to custom content.

\n
<van-cell v-for="item in list" :key="item" :title="item" />\n<van-back-top class="custom">Back Top</van-back-top>\n\n<style>\n  .custom {\n    width: 80px;\n    font-size: 14px;\n    text-align: center;\n  }\n</style>\n
\n
export default {\n  setup() {\n    const list = [...Array(50).keys()];\n    return { list };\n  },\n};\n
\n

Set Scroll Target

\n
<div class="container">\n  <van-cell v-for="item in list" :key="item" :title="item" />\n  <van-back-top target=".container" bottom="30vh" />\n</div>\n\n<style>\n  .container {\n    height: 60vh;\n    overflow: auto;\n  }\n</style>\n
\n
export default {\n  setup() {\n    const list = [...Array(50).keys()];\n    return { list };\n  },\n};\n
\n

Immediate Scroll

\n

Add immediate prop to scroll to top immediately.

\n
<van-back-top immediate />\n
\n

API

\n

Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AttributeDescriptionTypeDefault
targetCan be a selector or a DOM ELement, default closest parent scrolling containerstring | HTMLElement-
rightRight distance of the page, the default unit is pxnumber | string30
bottomBottom distance of the page, the default unit is pxnumber | string40
offsetThe component will not display until the scroll offset reaches this valuenumber200
teleportSpecifies a target element where BackTop will be mountedstring | Elementbody
immediate v4.0.9Whether to scroll to top immediatelybooleanfalse
z-indexSet the z-index to a fixed valuenumber | string100
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescriptionArguments
clickEmitted when Component is clickedevent: MouseEvent
\n

Slots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
defaultcustomize default content
\n

Types

\n

The component exports the following type definitions:

\n
import type { BackTopProps, BackTopThemeVars } from 'vant';\n
\n

Theming

\n

CSS Variables

\n

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

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDefault ValueDescription
--van-back-top-size40px-
--van-back-top-icon-size20px-
--van-back-top-right30px-
--van-back-top-bottom40px-
--van-back-top-z-index100-
--van-back-top-text-color#fff-
--van-back-top-backgroundvar(--van-blue)-
\n
'},null,8,l))}}}]);