Отключение для конкретных ссылок

Smooth Scroll в JavaScript применяется для плавного перемещения по странице при клике на якорные ссылки. Иногда возникает необходимость исключить определённые ссылки из действия плавного скролла, оставив их поведение стандартным. Это важно, например, когда на странице присутствуют внешние ссылки или специальные якоря, которые обрабатываются отдельными скриптами.

Использование атрибутов и селекторов

Для точечного контроля над ссылками можно использовать атрибуты или классы CSS. Например, если библиотека инициализируется глобально для всех ссылок с href="#...", то исключить конкретную ссылку можно с помощью уникального класса:

<a href="#section1" class="smooth-scroll">Раздел 1</a>
<a href="#section2" class="no-smooth">Раздел 2</a>

При инициализации Smooth Scroll необходимо указать селектор:

const scroll = new SmoothScroll('a.smooth-scroll', {
    speed: 600,
    offset: 50,
});

Ссылка с классом no-smooth будет игнорироваться, так как она не соответствует селектору a.smooth-scroll. Такой подход позволяет гибко управлять поведением скролла на странице.

Фильтрация ссылок через колбэк ignore

Некоторые версии Smooth Scroll поддерживают опцию ignore, которая принимает селектор или функцию для исключения элементов:

const scroll = new SmoothScroll('a[href*="#"]', {
    speed: 600,
    offset: 50,
    ignore: '.no-smooth',
});

В данном случае любые ссылки с классом no-smooth автоматически игнорируются, независимо от того, находятся ли они внутри общего контейнера.

Можно использовать более сложную фильтрацию через функцию:

const scroll = new SmoothScroll('a[href*="#"]', {
    speed: 600,
    offset: 50,
    ignore: function(anchor, toggle) {
        return anchor.dataset.noScroll === "true";
    }
});

Здесь каждая ссылка проверяется на наличие атрибута data-no-scroll="true". Если условие выполняется, скрипт пропускает её, оставляя стандартное поведение браузера.

Отключение через событие click

Альтернативный способ — перехват события click и отмена действия Smooth Scroll:

document.querySelectorAll('a').forEach(link => {
    link.addEventListener('click', function(event) {
        if (link.classList.contains('no-smooth')) {
            event.stopPropagation(); // предотвращает срабатывание Smooth Scroll
        }
    }, true);
});

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

Исключение внешних ссылок

Для автоматического игнорирования внешних ссылок можно использовать проверку домена:

const scroll = new SmoothScroll('a[href*="#"]', {
    speed: 600,
    offset: 50,
    ignore: function(anchor) {
        return anchor.hostname !== window.location.hostname;
    }
});

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

Комбинированный подход

Можно комбинировать классы, атрибуты и проверку домена:

const scroll = new SmoothScroll('a[href*="#"]', {
    speed: 600,
    offset: 50,
    ignore: function(anchor) {
        return anchor.classList.contains('no-smooth') || anchor.dataset.noScroll === "true" || anchor.hostname !== window.location.hostname;
    }
});

Это позволяет точно контролировать, какие ссылки остаются интерактивными для Smooth Scroll, а какие должны использовать стандартный переход.

Особенности работы с динамическим контентом

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

document.addEventListener('click', function(event) {
    const target = event.target.closest('a[href*="#"]');
    if (!target) return;

    if (target.classList.contains('no-smooth') || target.dataset.noScroll === "true") {
        return; // стандартное поведение
    }

    event.preventDefault();
    scroll.animateScroll(target);
});

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

Оглавление