Наверх BackTop

Появляется после прокрутки дальше порогового значения; по клику возвращается наверх. Плавная прокрутка через нативный scrollTo({ behavior: 'smooth' }), при prefers-reduced-motion автоматически сменяется мгновенной.

Базовое использование

Базовое использование (прокрутите вниз)

<script setup lang="ts">
</script>

<template>
  <!-- Базовое использование -->
  <LhBackTop :right="24" :bottom="24" />
</template>

<script>
export default {}
</script>

<template>
  <!-- Базовое использование -->
  <LhBackTop :right="24" :bottom="24" />
</template>

visibility-height задаёт порог появления, smooth отключает плавную прокрутку, target отслеживает указанный контейнер прокрутки.

Свой порог и отключение плавности

<script setup lang="ts">
</script>

<template>
  <!-- Свой порог и отключение плавности -->
  <LhBackTop :visibility-height="80" :smooth="false" :right="24" :bottom="90" />
</template>

<script>
export default {}
</script>

<template>
  <!-- Свой порог и отключение плавности -->
  <LhBackTop :visibility-height="80" :smooth="false" :right="24" :bottom="90" />
</template>

Остановка прокрутки (scrollend)

@scrollend сообщает текущее смещение прокрутки при её остановке: предпочтение отдаётся нативному событию scrollend (Chromium 114+ / Safari 18.2+), в старых браузерах автоматически откат к scroll + дебаунс 150 мс. Часто используется для синхронизации с якорями и ленивой загрузки данных.

Событие scrollend

Последняя позиция остановки: (без прокрутки)

<script setup>
import { ref } from 'vue'

const lastStop = ref('(без прокрутки)')

function onScrollEnd(scrollTop) {
  lastStop.value = `${scrollTop}px`
}
</script>

<template>
  <LhBackTop :right="24" :bottom="160" @scrollend="onScrollEnd" />
</template>

<script>
export default {
  data() {
    return { lastStop: '(без прокрутки)' }
  },
  methods: {
    onScrollEnd(scrollTop) {
      this.lastStop = `${scrollTop}px`
    },
  },
}
</script>

<template>
  <LhBackTop :right="24" :bottom="160" @scrollend="onScrollEnd" />
</template>

API

LhBackTop Props

Свойство	Описание	Тип	По умолчанию
target	Контейнер прокрутки (селектор или элемент; по умолчанию viewport)	string | HTMLElement	—
visibilityHeight	После скольких пикселей прокрутки появляется кнопка	number	200
right	Отступ справа, px	number	40
bottom	Отступ снизу, px	number	40
smooth	Плавная прокрутка	boolean	true
sx	Сокращённые свойства компоновки sx	LhSxProps	—

Events

Событие	Описание	Параметр обратного вызова
click	Срабатывает при клике по кнопке (затем выполняется прокрутка наверх)	(event: MouseEvent)
scrollend	Срабатывает при остановке прокрутки, несёт текущее смещение	(scrollTop: number)

Слоты: default (пользовательское содержимое).

Доступность

• Настоящий <button>; для чисто иконочного варианта обязательно имя (языковой пакет backtop.label)
• Появление/исчезновение не конфликтует с деревом фокуса (при скрытии удаляется через v-if)

Типы

TypeScript-типы, экспортируемые этим компонентом (извлечены автоматически из packages/components/backtop/src/types.ts и исходников @lh-ui/share/core/*; раскройте нужный пункт, чтобы увидеть полное определение; описания свойств — в таблице Props выше):

LhBackTopProps

export interface LhBackTopProps {
  /** Контейнер прокрутки (селектор или элемент; по умолчанию viewport) */
  target?: string | HTMLElement
  /** После скольких пикселей прокрутки появляется кнопка */
  visibilityHeight?: number
  /** Отступ справа, px */
  right?: number
  /** Отступ снизу, px */
  bottom?: number
  /** Плавная прокрутка */
  smooth?: boolean
  /** Сокращённые свойства компоновки sx */
  sx?: LhSxProps
}

Константы

Публичные константы, используемые этим компонентом (можно перейти к ним из столбцов «Тип / По умолчанию» в таблице Props, нажав на одноимённую запись):

LH_BACKTOP_VISIBILITY_HEIGHT_DEFAULT _{(из @lh-ui/share/core/backtop)}

/** Порог прокрутки по умолчанию, px */
export const LH_BACKTOP_VISIBILITY_HEIGHT_DEFAULT = 200

LH_BACKTOP_SCROLLEND_DELAY _{(из @lh-ui/share/core/backtop)}

/** Порог покоя для дебаунса scrollend, мс (только в браузерах без нативного scrollend) */
export const LH_BACKTOP_SCROLLEND_DELAY = 150