Backtop
Used when page content is long and needs a quick way to scroll back to the top, typically placed at the bottom-right corner of the page. If target is specified, it monitors scrolling within a specific container.
Basic Usage
Simply insert content using the default slot.
1:这是用来撑开Content的Row...
2:这是用来撑开Content的Row...
3:这是用来撑开Content的Row...
4:这是用来撑开Content的Row...
5:这是用来撑开Content的Row...
6:这是用来撑开Content的Row...
7:这是用来撑开Content的Row...
8:这是用来撑开Content的Row...
9:这是用来撑开Content的Row...
10:这是用来撑开Content的Row...
11:这是用来撑开Content的Row...
12:这是用来撑开Content的Row...
13:这是用来撑开Content的Row...
14:这是用来撑开Content的Row...
15:这是用来撑开Content的Row...
16:这是用来撑开Content的Row...
17:这是用来撑开Content的Row...
18:这是用来撑开Content的Row...
19:这是用来撑开Content的Row...
20:这是用来撑开Content的Row...
21:这是用来撑开Content的Row...
22:这是用来撑开Content的Row...
23:这是用来撑开Content的Row...
24:这是用来撑开Content的Row...
25:这是用来撑开Content的Row...
26:这是用来撑开Content的Row...
27:这是用来撑开Content的Row...
28:这是用来撑开Content的Row...
29:这是用来撑开Content的Row...
30:这是用来撑开Content的Row...
31:这是用来撑开Content的Row...
32:这是用来撑开Content的Row...
33:这是用来撑开Content的Row...
34:这是用来撑开Content的Row...
35:这是用来撑开Content的Row...
36:这是用来撑开Content的Row...
37:这是用来撑开Content的Row...
38:这是用来撑开Content的Row...
39:这是用来撑开Content的Row...
40:这是用来撑开Content的Row...
41:这是用来撑开Content的Row...
42:这是用来撑开Content的Row...
43:这是用来撑开Content的Row...
44:这是用来撑开Content的Row...
45:这是用来撑开Content的Row...
46:这是用来撑开Content的Row...
47:这是用来撑开Content的Row...
48:这是用来撑开Content的Row...
49:这是用来撑开Content的Row...
50:这是用来撑开Content的Row...
51:这是用来撑开Content的Row...
52:这是用来撑开Content的Row...
53:这是用来撑开Content的Row...
54:这是用来撑开Content的Row...
55:这是用来撑开Content的Row...
56:这是用来撑开Content的Row...
57:这是用来撑开Content的Row...
58:这是用来撑开Content的Row...
59:这是用来撑开Content的Row...
60:这是用来撑开Content的Row...
61:这是用来撑开Content的Row...
62:这是用来撑开Content的Row...
63:这是用来撑开Content的Row...
64:这是用来撑开Content的Row...
65:这是用来撑开Content的Row...
66:这是用来撑开Content的Row...
67:这是用来撑开Content的Row...
68:这是用来撑开Content的Row...
69:这是用来撑开Content的Row...
70:这是用来撑开Content的Row...
71:这是用来撑开Content的Row...
72:这是用来撑开Content的Row...
73:这是用来撑开Content的Row...
74:这是用来撑开Content的Row...
75:这是用来撑开Content的Row...
76:这是用来撑开Content的Row...
77:这是用来撑开Content的Row...
78:这是用来撑开Content的Row...
79:这是用来撑开Content的Row...
80:这是用来撑开Content的Row...
<template>
<div style="position: relative; border: 1px solid #eee">
<div class="scroll-box" style="padding: 20px; height: 500px; overflow: auto">
<div v-for="item in 80" :key="item" ref="item">{{ item }}:这是用来撑开Content的Row...</div>
</div>
<b-back-top target=".scroll-box" :visible-height="200">
<b-button type="success">返回顶端</b-button>
</b-back-top>
</div>
</template>Usage with Scrollbar
When used with scrollbar, no additional configuration is needed.
Note: If nested inside a custom scroll component, you need to place the BackTop component inside the Scrollbar component.
<template>
<div style="height: 500px; overflow: auto; border: 1px solid #eee">
<b-scrollbar style="height: 100%" wrap-class="scrollbar-box">
<div style="padding: 20px">
<div v-for="item in 80" :key="item" ref="item">{{ item }}:这是用来撑开Content的Row...</div>
</div>
<b-back-top target=".scrollbar-box" :visible-height="200">
<b-button type="info" size="large" icon="up"></b-button>
</b-back-top>
</b-scrollbar>
</div>
</template>Props
| Parameter | Description | Type | Options | Default |
|---|---|---|---|---|
| visible-height | The BackTop button is shown when the page scroll height reaches this value | Number | — | 400 |
| target | Target container identifier; specify the target's class or id to set the scroll listener | String | — | — |
| bottom | Distance from the bottom of the component | Number | — | 50 |
| right | Distance from the right of the component | Number | — | 50 |
| duration | Scroll animation duration, in milliseconds | Number | — | 1000 |
Events
| Event Name | Description | Return Value |
|---|---|---|
| click | Triggers when the button is clicked | — |