Поведение при клике

Для обеспечения плавной прокрутки при кликах на якорные ссылки необходимо создать экземпляр библиотеки Smooth Scroll. Основной способ инициализации выглядит следующим образом:

const scroll = new SmoothScroll('a[href*="#"]', {
    speed: 600,
    speedAsDuration: true,
    offset: 0,
    easing: 'easeInOutCubic',
    clip: true,
    updateURL: false,
});

Ключевые параметры:

  • speed — продолжительность анимации в миллисекундах.
  • speedAsDuration — если true, скорость интерпретируется как абсолютное время, иначе рассчитывается в зависимости от расстояния.
  • offset — смещение от целевого элемента, полезно при фиксированных шапках.
  • easing — тип кривой анимации, например, 'linear', 'easeInOutCubic'.
  • clip — предотвращает прокрутку за границы документа.
  • updateURL — при true изменяет URL в адресной строке при прокрутке.

Привязка к ссылкам

Smooth Scroll работает через селекторы CSS, что позволяет выбрать конкретные якорные ссылки для анимации. Например, можно ограничить действие только ссылками внутри навигационного меню:

const menuScroll = new SmoothScroll('.menu a[href*="#"]', { speed: 500 });

Если в документе несколько групп ссылок, каждая может иметь свои параметры скорости, кривой анимации и смещения.

Обработка кликов и отмена стандартного поведения

При клике на ссылку библиотека предотвращает стандартный переход по якорю и выполняет плавную анимацию. Это реализуется через метод animateScroll:

document.querySelectorAll('a[href*="#"]').forEach(link => {
    link.addEventListener('click', function(e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if(target) scroll.animateScroll(target);
    });
});

Важные моменты:

  • Проверка существования целевого элемента обязательна, иначе произойдет ошибка.
  • Метод preventDefault() блокирует стандартное поведение браузера.

Настройка смещения для фиксированных элементов

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

const scrollWithOffset = new SmoothScroll('a[href*="#"]', {
    speed: 700,
    offset: function(anchor, toggle) {
        const header = document.querySelector('.header');
        return header ? header.offsetHeight : 0;
    }
});

Функция offset может быть динамической, вычисляющей высоту шапки в зависимости от текущего состояния страницы.

Колбэки при клике и завершении прокрутки

Smooth Scroll предоставляет несколько событий для контроля поведения:

  • before — вызывается перед началом анимации.
  • after — вызывается после завершения прокрутки.

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

const scrollCallbacks = new SmoothScroll('a[href*="#"]', {
    speed: 600,
    before: function(anchor, toggle) {
        console.log('Начало прокрутки к элементу:', anchor);
    },
    after: function(anchor, toggle) {
        console.log('Прокрутка завершена:', anchor);
    }
});

Эти колбэки полезны для добавления дополнительных эффектов при кликах, например, подсветки активного пункта меню или запуска анимаций внутри целевого блока.

Прерывание прокрутки и управление поведением

Прерывание анимации возможно, если пользователь начинает скроллить страницу вручную. Smooth Scroll автоматически отменяет текущую прокрутку при взаимодействии с колесиком мыши или клавишами стрелок. Для ручного контроля можно использовать метод:

scroll.cancelScroll();

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

Использование с динамическими элементами

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

const newLinks = document.querySelectorAll('.dynamic a[href*="#"]');
newLinks.forEach(link => scroll.addLink(link));

Метод addLink позволяет интегрировать плавную прокрутку без пересоздания всего экземпляра библиотеки.

Обработка переходов на текущий якорь

При клике на ссылку, ведущую на уже видимый элемент, Smooth Scroll выполняет анимацию к текущей позиции. Чтобы избежать лишнего движения, можно проверить позицию целевого элемента:

const scrollCheck = new SmoothScroll('a[href*="#"]', {
    speed: 500,
    offset: 0,
    before: function(anchor) {
        if(anchor.getBoundingClientRect().top === 0) {
            return false; // Прерываем анимацию
        }
    }
});

Возврат false в колбэке before полностью отменяет прокрутку.

Адаптация под мобильные устройства

На мобильных устройствах важно учитывать особенности сенсорного скролла. Можно уменьшить скорость и изменить кривую анимации:

const scrollMobile = new SmoothScroll('a[href*="#"]', {
    speed: 400,
    easing: 'easeOutQuad',
});

Это делает прокрутку более естественной и отзывчивой для тач-интерфейсов.

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

Оглавление