Простой и легкий JavaScript плагин для создания анимированной прокрутки к любой секции на странице. Работает без зависимостей. Подключение и настройка за пару строк.
Сегодня большой популярностью для прокрутки страницы пользуются плагины jQuery. Однако, данная библиотека с каждым месяцем теряет свою популярность. Особенно, если речь идет о крупных проектах. Что может быть лучше маленького плагина на JavaScript для решения определенной задачи?
Именно таковым и является инструмент MoveTo.js – простой, легкий, изящный. Давайте разберемся, как с ним работать.
Скачиваем файлы плагина (ссылка выше) и подключаем скрипт к нашему проекту следующей строкой:
<script src="../dist/moveTo.min.js"></script>
Разметка HTML-элементов будет выглядеть так:
<a href="#target" class="js-trigger" data-mt-duration="300">Trigger</a> <!-- ИЛИ --> <button type="button" class="js-trigger" data-target="#target" data-mt-duration="300">Trigger</button>
Пишем скрипт для вызова плагина:
const moveTo = new MoveTo();
const target = document.getElementById('target');
moveTo.move(target);
// Или зарегистрировать триггер
const trigger = document.getElementsByClassName('js-trigger')[0];
moveTo.registerTrigger(trigger);
К опциям плагина относятся:
new MoveTo({
tolerance: 0,
duration: 800,
easing: 'easeOutQuart'
})
| Опция | По умолчанию | Описание |
|---|---|---|
| tolerance | 0 | Толерантность цели, которая будет прокручиваться, может быть отрицательным или положительным |
| duration | 800 | Длительность прокрутки в миллисекундах |
| easing | easeOutQuart | Функция анимации |
| callback | noop | Функция, которая будет выполнена после завершения прокрутки. Цель проходит в качестве первого аргумента |
Вот, собственно, и вся настройка плагина. Из опций хотелось бы выделить наличие коллбека. Всегда иметь уже готовый коллбек 🙂
