Backtop

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

Импорт и регистрация

Для использования компонента необходимо импортировать его из библиотеки Element Plus и зарегистрировать в приложении Vue:

import { ElBacktop } from 'element-plus';
import 'element-plus/dist/index.css';

export default {
  components: {
    ElBacktop
  }
};

Если используется Vue 3 с Composition API, регистрация может быть глобальной через app.use(ElementPlus).

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

<template>
  <el-backtop />
</template>

По умолчанию кнопка Backtop появляется в правом нижнем углу страницы, когда пользователь прокручивает страницу вниз более чем на 200 пикселей (значение по умолчанию для свойства visibility-height).

Настройка положения

Положение кнопки на странице можно задавать с помощью свойств right и bottom:

<el-backtop :right="50" :bottom="100" />
  • right – расстояние от правого края окна (по умолчанию 40px).
  • bottom – расстояние от нижнего края окна (по умолчанию 40px).

Эти свойства принимают значения в пикселях.

Настройка видимости

Свойство visibility-height определяет, после какой высоты прокрутки кнопка станет видимой:

<el-backtop :visibility-height="300" />
  • Значение указывается в пикселях.
  • Если прокрутка меньше этого значения, кнопка не отображается.

Кастомизация и слоты

Компонент поддерживает слот по умолчанию, который позволяет заменять стандартную иконку на кастомный элемент:

<el-backtop :right="50" :bottom="50">
  <template #default>
    <div style="background-color: #409EFF; color: white; padding: 10px; border-radius: 50%;">
      Вверх
    </div>
  </template>
</el-backtop>

С помощью слота можно использовать текст, SVG-иконки или любой Vue-компонент.

События

Backtop поддерживает одно основное событие:

  • click – срабатывает при нажатии на кнопку.

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

<el-backtop @click="handleBacktopClick" />

<script>
export default {
  methods: {
    handleBacktopClick() {
      console.log('Кнопка Backtop нажата');
    }
  }
};
</script>

Использование в прокручиваемых контейнерах

Компонент можно привязать не только к window, но и к определенному элементу с прокруткой. Для этого используется свойство target:

<template>
  <div ref="scrollContainer" style="height: 400px; overflow: auto;">
    <div style="height: 1500px;">Длинный контент</div>
    <el-backtop :target="scrollContainer" :right="20" :bottom="20" />
  </div>
</template>

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

export default {
  setup() {
    const scrollContainer = ref(null);
    return { scrollContainer };
  }
};
</script>
  • target – ссылка на элемент DOM, внутри которого будет отслеживаться прокрутка.
  • Это удобно для модальных окон или блоков с прокруткой, где не нужно использовать весь документ.

Программная прокрутка

Компонент автоматически скроллит к верху при клике. Внутри Vue можно управлять поведением с помощью стандартного метода scrollTo на контейнере. Например, если нужно добавить плавное замедление:

const scrollToTop = (el) => {
  el.scrollTo({
    top: 0,
    beh * avior: 'smooth'
  });
};

Советы по использованию

  • Не перегружать страницу несколькими Backtop – достаточно одного на основной контейнер.
  • Кастомизация кнопки улучшает пользовательский интерфейс, особенно для брендинга.
  • Адаптивность: проверять расположение кнопки на мобильных устройствах, так как она может перекрывать контент.
  • Событие click удобно для аналитики, чтобы отслеживать, как часто пользователи возвращаются к началу страницы.

Эта детальная настройка позволяет интегрировать Backtop в любые Vue-приложения с максимальным контролем над поведением, внешним видом и контекстом прокрутки.

Оглавление