Кастомизация плавного скролла по якорям в Webflow

Якорная навигация — стандартный паттерн для лендингов, лонгридов и сайтов-портфолио. По умолчанию в Webflow встроен скрипт плавного скролла к якорю, но его базовая скорость фиксирована (1000 мс). Это поведение далеко не всегда отвечает задачам UX/UI дизайна.

Если нужная секция находится слишком близко, секундный скролл кажется медленным и «тормозным». При навигации по очень длинной странице та же секунда превращается в слишком резкий скачок. Также возникает проблема позиционирования: контент может прилипать к самому верху экрана или перекрываться фиксированной шапкой.

Решить эти задачи можно без написания сложного кода. Достаточно использовать встроенные кастомные атрибуты (Custom Attributes), которые нативно поддерживает системный файл webflow.js.

Как добавить параметры скролла

Настроить поведение можно прямо в панели управления проектом. Атрибуты добавляются в настройках элемента ссылки, который ведет на нужный якорь: Button, Text Link или Link Block. Перейдите во вкладку Settings и найдите раздел Custom Attributes.

Центрирование скролла (отступ от края)

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

Для достижения такого эффекта добавьте следующий атрибут:

• Name: data-scroll

• Value: mid

Управление скоростью анимации

Специальный атрибут позволяет переопределить стандартную скорость прокрутки. Указанное значение работает как множитель: базовая скорость в 1000 мс умножается на введенное вами число.

Для настройки скорости пропишите:

• Name: data-scroll-time

• Value: [ваш множитель]

Шпаргалка по значениям data-scroll-time

Подбирайте множитель в зависимости от расстояния между секциями и желаемого визуального эффекта:

• 0 — моментальный переход. Плавная анимация отключается, происходит мгновенный прыжок к секции.

• 0.75 (750 мс) — слегка ускоренный скролл. Оптимальное решение для навигации между соседними блоками.

• 1 (1000 мс) — скорость по умолчанию, заложенная в систему.

• 1.25 (1250 мс) — замедленный скролл. Хорошо подходит для очень длинных страниц, чтобы пользователь успел осознать перемещение.

• 2 (2000 мс) — вальяжная, в два раза более медленная прокрутка. Создает кинематографичный эффект.

• 20 (20 000 мс) — экстремально долгий скролл. Используется исключительно для специфичных арт-проектов или пасхалок.

Дополнительные нюансы работы скрипта

Взаимодействие с фиксированными шапками (Fixed Navbar). Если класс вашей навигации имеет свойство position: fixed или элемент обернут в тег header, Webflow автоматически рассчитывает отступ. Это нужно, чтобы шапка не перекрывала контент при остановке скролла. Если авторасчет ломается, первым делом проверьте корректность настроек позиционирования меню.

Комбинирование атрибутов. Вы можете применять несколько параметров к одному элементу. Смело добавляйте на одну кнопку одновременно и data-scroll, и data-scroll-time. Внутреннего конфликта скриптов не произойдет, платформа корректно отработает оба условия.