Простой и легкий 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 | Функция, которая будет выполнена после завершения прокрутки. Цель проходит в качестве первого аргумента |
Вот, собственно, и вся настройка плагина. Из опций хотелось бы выделить наличие коллбека. Всегда иметь уже готовый коллбек 🙂