Наверх BackTop

Кнопка возврата наверх, появляющаяся после превышения порога прокрутки.

Наверх

<template>
  <div class="demo-col" style="max-width: 640px">
    <p class="demo-note">Прокрутите контейнер вниз больше чем на visibilityHeight (200px) — в правом нижнем углу появится кнопка возврата наверх</p>
    <div ref="scroller" class="anchor-scroller">
      <div v-for="i in 20" :key="i" class="anchor-sec">
        <h3>Раздел {{ i }}</h3>
        <p>Прокрутите вниз и нажмите кнопку в правом нижнем углу.</p>
      </div>
    </div>
    <LhBackTop :target="scrollerEl" :visibility-height="200" :right="24" :bottom="24" smooth />
  </div>
</template>

<script>
export default {
  data: () => ({
    scrollerEl: undefined,
  }),
}
</script>

Props

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

Slots

Слот	Описание
default	Содержимое кнопки (если не передано — стандартный значок стрелки)