BackTop

Компонент BackTop предназначен для реализации функционала плавного возврата пользователя в начало страницы или контейнера с прокруткой. Он особенно полезен на страницах с длинным контентом, где удобство навигации критично.

Основные возможности

  • Автоматическая видимость – кнопка появляется только после того, как пользователь прокрутил страницу на определённое расстояние.
  • Плавная анимация прокрутки – при клике на кнопку содержимое страницы возвращается к верхней части с эффектом плавного скролла.
  • Настраиваемая позиция и стили – позволяет расположить кнопку в любой части окна и изменить её внешний вид с помощью пропсов и слотов.
  • Поддержка пользовательских элементов – вместо стандартной кнопки можно использовать любой JSX-элемент через слот.

Основные свойства (props)

Свойство Тип Значение по умолчанию Описание
target HTMLElement \| Window window Контейнер, прокрутку которого нужно отслеживать.
visibility-height number 200 Высота прокрутки в пикселях, после которой кнопка становится видимой.
right number 40 Отступ кнопки от правого края контейнера или окна.
bottom number 40 Отступ кнопки от нижнего края контейнера или окна.
duration number 450 Продолжительность анимации возврата в миллисекундах.
on-click (event: MouseEvent) => void - Обработчик события клика по кнопке.

Пример базового использования

import { createApp } from 'vue'
import { NBackTop } from 'naive-ui'

const App = {
  template: `
    <div style="height: 2000px; padding: 20px;">
      <p>Длинный контент для прокрутки...</p>
      <n-back-top />
    </div>
  `
}

createApp(App).mount('#app')

В этом примере кнопка BackTop будет появляться автоматически после прокрутки 200 пикселей вниз и возвращать страницу к верху за 450 миллисекунд.

Настройка позиции и внешнего вида

Кнопку можно разместить в любом углу с помощью пропсов right и bottom:

<n-back-top :right="80" :bottom="100" />

Для кастомизации внешнего вида используется слот default:

<n-back-top>
  <template #default>
    <div style="width: 50px; height: 50px; background: #42b983; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold;">
      UP
    </div>
  </template>
</n-back-top>

Слот позволяет полностью заменить стандартный квадратный элемент на любой компонент или HTML-разметку.

Отслеживание кастомного контейнера

Если нужно использовать BackTop для внутреннего контейнера с прокруткой, вместо окна передается DOM-элемент в target:

<div ref="scrollContainer" style="height: 300px; overflow-y: auto;">
  <div style="height: 1000px;">Контент внутри контейнера</div>
  <n-back-top :target="scrollContainer" />
</div>

<script>
import { ref, onMounted } from 'vue'

export default {
  setup() {
    const scrollContainer = ref(null)
    return { scrollContainer }
  }
}
</script>

Теперь кнопка появится, когда прокрутка контейнера превысит visibility-height, а возвращение будет происходить внутри этого контейнера.

Анимация и управление временем

Проп duration позволяет гибко настраивать скорость анимации. Например, замедленный эффект:

<n-back-top :duration="1000" />

Если требуется мгновенный скролл без анимации, достаточно установить duration в 0:

<n-back-top :duration="0" />

События

  • on-click – вызывается при клике на кнопку. Может использоваться для логирования или выполнения дополнительного действия при возврате к верху:
<n-back-top @on-click="handleBackTopClick" />

<script>
function handleBackTopClick(event) {
  console.log('Пользователь нажал на BackTop', event)
}
</script>

Рекомендации по использованию

  • Размещать кнопку в правом нижнем углу — привычное для пользователей расположение.
  • Для длинных страниц с динамически подгружаемым контентом следить, чтобы target корректно указывал на контейнер, который реально прокручивается.
  • При кастомизации слота рекомендуется сохранять интерактивность элемента (pointer events) для корректного срабатывания клика.

Совместимость и ограничения

  • BackTop корректно работает как с окнами браузера, так и с контейнерами с вертикальной прокруткой.
  • Не поддерживает горизонтальную прокрутку — функционал предназначен только для вертикального возврата.
  • При использовании с динамическими высотами контейнеров может потребоваться обновление состояния после изменения размеров, чтобы кнопка появлялась корректно.

Использование BackTop в Naive UI позволяет создавать интуитивно понятный и визуально приятный интерфейс для навигации по длинным страницам, обеспечивая плавное возвращение к верхней части контента и гибкую кастомизацию под любой дизайн.

Оглавление