Backtop
Кнопка, которая прокручивает страницу к началу при нажатии. Появляется после превышения порога прокрутки. Поддерживает кольцо прогресса, размеры, формы и другое.
Basic
Прокрутите внутри блока вниз, чтобы увидеть появление кнопки backtop.
Scroll down
Line 1 — Lorem ipsum dolor sit amet consectetur.
Line 2 — Lorem ipsum dolor sit amet consectetur.
Line 3 — Lorem ipsum dolor sit amet consectetur.
Line 4 — Lorem ipsum dolor sit amet consectetur.
Line 5 — Lorem ipsum dolor sit amet consectetur.
Line 6 — Lorem ipsum dolor sit amet consectetur.
Line 7 — Lorem ipsum dolor sit amet consectetur.
Line 8 — Lorem ipsum dolor sit amet consectetur.
Line 9 — Lorem ipsum dolor sit amet consectetur.
Line 10 — Lorem ipsum dolor sit amet consectetur.
Line 11 — Lorem ipsum dolor sit amet consectetur.
Line 12 — Lorem ipsum dolor sit amet consectetur.
Line 13 — Lorem ipsum dolor sit amet consectetur.
Line 14 — Lorem ipsum dolor sit amet consectetur.
Line 15 — Lorem ipsum dolor sit amet consectetur.
Line 16 — Lorem ipsum dolor sit amet consectetur.
Line 17 — Lorem ipsum dolor sit amet consectetur.
Line 18 — Lorem ipsum dolor sit amet consectetur.
Line 19 — Lorem ipsum dolor sit amet consectetur.
Line 20 — Lorem ipsum dolor sit amet consectetur.
vue
<VxBacktop />Progress Ring
Показывайте круговой индикатор прогресса вокруг кнопки с помощью show-progress.
Scroll to see progress ring fill
Line 1 — Watch the ring fill as you scroll.
Line 2 — Watch the ring fill as you scroll.
Line 3 — Watch the ring fill as you scroll.
Line 4 — Watch the ring fill as you scroll.
Line 5 — Watch the ring fill as you scroll.
Line 6 — Watch the ring fill as you scroll.
Line 7 — Watch the ring fill as you scroll.
Line 8 — Watch the ring fill as you scroll.
Line 9 — Watch the ring fill as you scroll.
Line 10 — Watch the ring fill as you scroll.
Line 11 — Watch the ring fill as you scroll.
Line 12 — Watch the ring fill as you scroll.
Line 13 — Watch the ring fill as you scroll.
Line 14 — Watch the ring fill as you scroll.
Line 15 — Watch the ring fill as you scroll.
Line 16 — Watch the ring fill as you scroll.
Line 17 — Watch the ring fill as you scroll.
Line 18 — Watch the ring fill as you scroll.
Line 19 — Watch the ring fill as you scroll.
Line 20 — Watch the ring fill as you scroll.
vue
<VxBacktop show-progress />Scroll Percentage
Показывайте процент прокрутки внутри кнопки через show-percent. Хорошо сочетается с show-progress.
Percentage + progress ring
Line 1 — Scroll to see the percentage.
Line 2 — Scroll to see the percentage.
Line 3 — Scroll to see the percentage.
Line 4 — Scroll to see the percentage.
Line 5 — Scroll to see the percentage.
Line 6 — Scroll to see the percentage.
Line 7 — Scroll to see the percentage.
Line 8 — Scroll to see the percentage.
Line 9 — Scroll to see the percentage.
Line 10 — Scroll to see the percentage.
Line 11 — Scroll to see the percentage.
Line 12 — Scroll to see the percentage.
Line 13 — Scroll to see the percentage.
Line 14 — Scroll to see the percentage.
Line 15 — Scroll to see the percentage.
Line 16 — Scroll to see the percentage.
Line 17 — Scroll to see the percentage.
Line 18 — Scroll to see the percentage.
Line 19 — Scroll to see the percentage.
Line 20 — Scroll to see the percentage.
vue
<VxBacktop show-progress show-percent />Sizes
Три размера: small (32px), default (40px), large (48px).
small
Line 1
Line 2
Line 3
Line 4
Line 5
Line 6
Line 7
Line 8
Line 9
Line 10
Line 11
Line 12
Line 13
Line 14
Line 15
default
Line 1
Line 2
Line 3
Line 4
Line 5
Line 6
Line 7
Line 8
Line 9
Line 10
Line 11
Line 12
Line 13
Line 14
Line 15
large
Line 1
Line 2
Line 3
Line 4
Line 5
Line 6
Line 7
Line 8
Line 9
Line 10
Line 11
Line 12
Line 13
Line 14
Line 15
vue
<VxBacktop size="small" />
<VxBacktop size="default" />
<VxBacktop size="large" />Shape
Выбирайте между circle (по умолчанию) и square (скруглённый квадрат).
circle
Line 1
Line 2
Line 3
Line 4
Line 5
Line 6
Line 7
Line 8
Line 9
Line 10
Line 11
Line 12
Line 13
Line 14
Line 15
square
Line 1
Line 2
Line 3
Line 4
Line 5
Line 6
Line 7
Line 8
Line 9
Line 10
Line 11
Line 12
Line 13
Line 14
Line 15
vue
<VxBacktop shape="circle" />
<VxBacktop shape="square" />Tooltip
Добавьте нативную подсказку через prop tooltip.
Hover the button to see the tooltip
Line 1 — Content here.
Line 2 — Content here.
Line 3 — Content here.
Line 4 — Content here.
Line 5 — Content here.
Line 6 — Content here.
Line 7 — Content here.
Line 8 — Content here.
Line 9 — Content here.
Line 10 — Content here.
Line 11 — Content here.
Line 12 — Content here.
Line 13 — Content here.
Line 14 — Content here.
Line 15 — Content here.
Line 16 — Content here.
Line 17 — Content here.
Line 18 — Content here.
Line 19 — Content here.
Line 20 — Content here.
vue
<VxBacktop tooltip="Back to top" />Scroll To Element
Прокручивайте к конкретному элементу вместо начала страницы с помощью scroll-to.
Target section
Line 1 — Scroll down, button scrolls back here.
Line 2 — Scroll down, button scrolls back here.
Line 3 — Scroll down, button scrolls back here.
Line 4 — Scroll down, button scrolls back here.
Line 5 — Scroll down, button scrolls back here.
Line 6 — Scroll down, button scrolls back here.
Line 7 — Scroll down, button scrolls back here.
Line 8 — Scroll down, button scrolls back here.
Line 9 — Scroll down, button scrolls back here.
Line 10 — Scroll down, button scrolls back here.
Line 11 — Scroll down, button scrolls back here.
Line 12 — Scroll down, button scrolls back here.
Line 13 — Scroll down, button scrolls back here.
Line 14 — Scroll down, button scrolls back here.
Line 15 — Scroll down, button scrolls back here.
Line 16 — Scroll down, button scrolls back here.
Line 17 — Scroll down, button scrolls back here.
Line 18 — Scroll down, button scrolls back here.
Line 19 — Scroll down, button scrolls back here.
Line 20 — Scroll down, button scrolls back here.
vue
<VxBacktop scroll-to="#my-section" />Custom Content
Используйте default slot для кастомного содержимого. Slot предоставляет percent.
Custom slot with percentage
Line 1 — Content.
Line 2 — Content.
Line 3 — Content.
Line 4 — Content.
Line 5 — Content.
Line 6 — Content.
Line 7 — Content.
Line 8 — Content.
Line 9 — Content.
Line 10 — Content.
Line 11 — Content.
Line 12 — Content.
Line 13 — Content.
Line 14 — Content.
Line 15 — Content.
Line 16 — Content.
Line 17 — Content.
Line 18 — Content.
Line 19 — Content.
Line 20 — Content.
vue
<VxBacktop show-progress size="large">
<template #default="{ percent }">
<span>{{ percent }}%</span>
</template>
</VxBacktop>Full Custom Button
Используйте slot #button, чтобы заменить всю кнопку. Он получает { percent, visible, scroll, style } — вызовите scroll($event) для запуска прокрутки, примените style для позиционирования.
Fully custom button via #button slot
Line 1
Line 2
Line 3
Line 4
Line 5
Line 6
Line 7
Line 8
Line 9
Line 10
Line 11
Line 12
Line 13
Line 14
Line 15
Line 16
Line 17
Line 18
Line 19
Line 20
vue
<VxBacktop>
<template #button="{ percent, scroll, style }">
<div :style="style" @click="scroll">
Back to top · {{ percent }}%
</div>
</template>
</VxBacktop>Disabled
Button is visible but disabled
Line 1
Line 2
Line 3
Line 4
Line 5
Line 6
Line 7
Line 8
Line 9
Line 10
Line 11
Line 12
Line 13
Line 14
Line 15
Line 16
Line 17
Line 18
Line 19
Line 20
vue
<VxBacktop disabled />Auto Hide
Скрывать после периода бездействия (в мс). Кнопка появляется снова при прокрутке.
vue
<!-- Hide after 3 seconds of no scrolling -->
<VxBacktop :auto-hide="3000" />API
VxBacktop Props
| Prop | Type | Default | Description |
|---|---|---|---|
target | string | HTMLElement | window | Контейнер прокрутки |
visibility-height | number | 200 | Порог прокрутки для показа (px) |
right | number | 40 | Отступ справа (px) |
bottom | number | 40 | Отступ снизу (px) |
smooth | boolean | true | Плавная анимация прокрутки |
size | 'small' | 'default' | 'large' | 'default' | Размер кнопки |
shape | 'circle' | 'square' | 'circle' | Форма кнопки |
show-progress | boolean | false | Показывать круговое кольцо прогресса |
show-percent | boolean | false | Показывать процент прокрутки |
scroll-to | string | — | CSS-селектор, к которому прокручивать вместо начала |
tooltip | string | — | Текст нативной подсказки |
disabled | boolean | false | Отключить кнопку |
auto-hide | number | 0 | Автоскрытие после бездействия (мс), 0 = выкл |
root-class | string | string[] | object | — | Класс на корневом элементе |
Events
| Event | Payload | Description |
|---|---|---|
click | MouseEvent | Клик по кнопке |
Slots
| Slot | Props | Description |
|---|---|---|
default | { percent: number } | Кастомное внутреннее содержимое (заменяет иконку) |
button | { percent: number, visible: boolean, scroll: Function, style: object } | Заменяет всю кнопку. Используйте style для позиционирования, вызывайте scroll($event) для запуска прокрутки. |
Exposed
| Name | Type | Description |
|---|---|---|
visible | Ref<boolean> | Видима ли кнопка |
scrollPercent | Ref<number> | Текущий процент прокрутки (0–100) |