MoveTo — плагин JavaScript: плавная прокрутка страница без зависимостей

Простой и легкий 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'
})

Вот, собственно, и вся настройка плагина. Из опций хотелось бы выделить наличие коллбека. Всегда иметь уже готовый коллбек 🙂