Плавная прокрутка

Bliss.js — легковесная библиотека для работы с DOM, которая предоставляет удобные методы для управления событиями, классами и анимациями. Одной из распространённых задач в веб-разработке является реализация плавной прокрутки страницы к определённым элементам. Bliss.js делает это максимально просто, сохраняя чистоту кода и минимизируя зависимости.

Выбор элемента и привязка события

Для начала необходимо выбрать элемент, по которому будет кликать пользователь, чтобы инициировать прокрутку, а также элемент, к которому необходимо прокрутить страницу. Bliss.js предоставляет функцию $$ для выборки нескольких элементов и $ для одного элемента:

const link = $('.scroll-link');   // Кнопка или ссылка
const target = $('#target-section'); // Секция, к которой будет прокрутка

Метод on используется для привязки событий:

link.on('click', function(event) {
    event.preventDefault();
    // Логика прокрутки будет здесь
});

Ключевой момент — использование event.preventDefault(), чтобы предотвратить стандартное поведение ссылки и сохранить контроль над анимацией.

Анимация прокрутки

Bliss.js предоставляет метод animate для плавной анимации числовых свойств. Прокрутку страницы можно осуществлять через свойство scrollTop:

$('html, body').animate(
    { scrollTop: target.offsetTop }, 
    600 // продолжительность анимации в миллисекундах
);

Пояснения:

  • scrollTop задаёт вертикальное смещение окна просмотра.
  • target.offsetTop возвращает позицию элемента относительно начала страницы.
  • Время анимации задаётся в миллисекундах; значение 600 соответствует 0.6 секунды.

Использование кривых ускорения (easing)

Для более естественного эффекта движения можно использовать функции плавности (easing). Bliss.js поддерживает стандартные функции типа linear, ease-in, ease-out и ease-in-out:

$('html, body').animate(
    { scrollTop: target.offsetTop },
    800,
    'ease-in-out'
);

Преимущества применения easing:

  • Создание визуально приятного движения.
  • Избежание резких рывков при долгих прокрутках.
  • Контроль динамики ускорения и замедления.

Прокрутка к якорям на странице

Bliss.js упрощает работу с якорными ссылками. Вместо ручного вычисления позиции элемента можно автоматически прокручивать к элементу с соответствующим ID:

$$('a[href^="#"]').forEach(link => {
    link.on('click', function(event) {
        event.preventDefault();
        const targetId = this.getAttribute('href').slice(1);
        const targetElement = $(`#${targetId}`);
        if (targetElement) {
            $('html, body').animate({ scrollTop: targetElement.offsetTop }, 700);
        }
    });
});

Особенности реализации:

  • Селектор a[href^="#"] выбирает все ссылки, указывающие на якорь.
  • Метод slice(1) удаляет символ # из строки.
  • Проверка if (targetElement) предотвращает ошибки при отсутствии элемента на странице.

Адаптивная прокрутка с учётом фиксированных шапок

Если на странице присутствует фиксированное меню, необходимо корректировать смещение, чтобы целевой элемент не оказался скрытым:

const headerHeight = $('.header').offsetHeight;

$('html, body').animate(
    { scrollTop: target.offsetTop - headerHeight },
    600,
    'ease-in-out'
);

Это позволяет точно настроить позицию видимой области после прокрутки.

Прерывание анимации

Bliss.js позволяет прерывать текущую анимацию при повторном клике или новом действии:

$('html, body').stop().animate({ scrollTop: target.offsetTop }, 600);

Метод stop() немедленно останавливает активную анимацию, предотвращая наложение нескольких анимационных действий.

Совмещение с другими эффектами

Плавная прокрутка в Bliss.js легко интегрируется с другими анимациями и визуальными эффектами, например, с постепенным появлением элементов при скролле:

$('html, body').animate(
    { scrollTop: target.offsetTop },
    700,
    'ease-out',
    () => {
        target.addClass('visible');
    }
);

Примечание: колбэк-функция вызывается после завершения анимации, что удобно для цепочек эффектов.

Вывод

Bliss.js обеспечивает лаконичный и удобный способ реализации плавной прокрутки, включая поддержку easing, прерывание анимаций и адаптацию к фиксированным шапкам. Использование встроенных методов animate, on и селекторов $/$$ делает код чистым и легко поддерживаемым, позволяя создавать интерактивные и визуально привлекательные интерфейсы без дополнительных библиотек.

Оглавление