Когда посетитель заходит на лендинг, собранный в Elementor, и видит дёрганую прокрутку с рывками между секциями, доверие к сайту падает быстрее, чем скролл доезжает до футера. Особенно если страница тяжелая: фоновое видео, parallax-эффекты, десяток секций с анимацией. Стандартный скролл браузера не умеет плавно фиксироваться на границах блоков, он просто проезжает мимо.

Можно потратить часы на подбор плагинов кеширования, минификацию и танцы с бубном. А можно подключить один лёгкий скрипт, который превращает рваные переходы в плавное перелистывание секций, как на дорогих лендингах.

Речь про Scrollify, jQuery-плагин от Luke Haas, который живёт на GitHub уже много лет, собирает 1800+ звёзд и до сих пор работает там, где «современные» решения спотыкаются о конфликты с Elementor. Никаких подписок, никаких тонн зависимостей, один .js файл и десяток строк конфигурации.

💡 Быстрый обзор:

• Установка Scrollify: скачать скрипт с GitHub и подключить в functions.php
• Настройка секций в Elementor: CSS-класс, минимальная высота и отступы
• Базовая конфигурация: разбор опций scrollSpeed, easing, setHeights и touchScroll
• Вертикальная навигация: связка с виджетом Scroll Navigation из JetElements
• Тонкая кастомизация: замена стандартных кругов на SVG-иконки через CSS
• Типичные проблемы: отступ снизу, тряска скролла, конфликт анкоров и их решения

Что такое Scrollify и в чём его фишка

Scrollify, это jQuery-плагин, который принудительно привязывает скролл к границам секций. Пользователь крутит колесо, страница не едет плавно, а перещёлкивается к следующему блоку. Поведение напоминает свайп между экранами в мобильном приложении, только на десктопе и через колесо мыши.

Главное преимущество, предсказуемость. Вы точно знаете, какой блок увидит посетитель после скролла. Никаких «перелётов» и полупрокрученных секций. Плагин оптимизирован под тач-устройства и умеет работать с динамическим контентом, можно подгружать секции через AJAX, Scrollify пересчитает позиции.

Из коробки доступны: навигация по хешу (прямые ссылки на секции), прерывание между секциями для нестандартных блоков (футер, шапка), callback-функции before/after/afterRender/afterResize.

Установка и базовая конфигурация

Для работы нужен jQuery 1.7 или новее. В 2026 году это звучит архаично, но на практике большинство тем и плагинов WordPress до сих пор тянут jQuery в подвал, конфликта не будет.

Скачайте jquery.scrollify.js с GitHub-репозитория lukehaas/Scrollify и подключите его в футере сайта через functions.php:

1
add_action('wp_enqueue_scripts', function () {
2
    wp_enqueue_script(
3
        'scrollify',
4
        get_template_directory_uri() . '/js/jquery.scrollify.js',
5
        ['jquery'],
6
        '1.1.1',
7
        true
8
    );
9
});

Самый простой вариант запуска, натравить Scrollify на элементы с определённым CSS-классом:

1
jQuery(document).ready(function ($) {
2
    $.scrollify({
3
        section: '.example-classname',
4
    });
5
});

Полный список опций конфигурации выглядит так:

1
$.scrollify({
2
    section: '.example-classname',
3
    sectionName: 'section-name',
4
    interstitialSection: '',
5
    easing: 'easeOutExpo',
6
    scrollSpeed: 1100,
7
    offset: 0,
8
    scrollbars: true,
9
    standardScrollElements: '',
10
    setHeights: true,
11
    overflowScroll: true,
12
    updateHash: true,
13
    touchScroll: true,
14
    before: function () {},
15
    after: function () {},
16
    afterResize: function () {},
17
    afterRender: function () {},
18
});

Ключевые параметры, которые стоит трогать сразу: scrollSpeed (скорость анимации в миллисекундах, дефолт 1100, для длинных лендингов лучше снизить до 600-800), setHeights (автоподгон высоты секций под viewport), updateHash (добавляет #section-name в URL при скролле).

Интеграция Scrollify с Elementor: три шага

Чтобы Scrollify подхватил секции, собранные в Elementor, нужно правильно их разметить. Хаотично расставленные блоки без классов плагин просто не увидит.

Шаг 1: назначаем CSS-класс каждой секции

Откройте редактирование секции в Elementor, перейдите на вкладку «Дополнительно» и в поле «CSS класс» впишите значение, например, .scrollify (без точки, Elementor добавляет её сам). Класс должен быть одинаковым для всех секций, которые участвуют в покадровой прокрутке.

Шаг 2: выставляем минимальную высоту

Опытным путём выяснено: чтобы избежать подёргиваний при скролле, секциям нужна минимальная высота 100vh и отступы, обнулённые в ноль. На вкладке «Макет» установите:

• Минимальная высота: 100 VH
• Внутренние отступы (padding): 0 со всех сторон

Шаг 3: прописываем конфигурацию под свой сайт

Ниже, боевой конфиг, который используется на реальных проектах. Ширина экрана проверяется для того, чтобы на мобильных устройствах (меньше 1000px) скролл оставался обычным, секционная прокрутка на телефоне скорее мешает, чем помогает:

1
jQuery(document).ready(function ($) {
2
    if ($(window).width() > 1000) {
3
        $.scrollify({
4
            section: '.scrollify, .footer',
5
            interstitialSection: '',
6
            easing: 'easeOutExpo',
7
            scrollSpeed: 1000,
8
            offset: 0,
9
            scrollbars: true,
10
            standardScrollElements: '.footer',
11
            setHeights: true,
12
            overflowScroll: true,
13
            updateHash: false,
14
            touchScroll: true,
15
        });
16
    }
17
});

Обратите внимание: в section переданы и .scrollify, и .footer. Футер не должен участвовать в покадровой прокрутке как полноценная секция (он обычно меньше 100vh), но Scrollify должен знать о нём, для этого есть standardScrollElements.

Вертикальная навигация через JetElements Scroll Navigation

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

Здесь на сцену выходит JetElements от Crocoblock, один из самых мощных наборов дополнительных виджетов для Elementor. В его составе есть виджет Scroll Navigation, который рисует вертикальную панель с точками-индикаторами и привязывает их к секциям.

После установки JetElements найдите виджет в панели и перетащите на страницу. Дальше, два встречных действия.

Сначала привяжите навигацию к секциям. В настройках виджета для каждого пункта укажите ID соответствующей секции:

Затем откройте каждую секцию в Elementor и пропишите тот же ID в поле «CSS ID» на вкладке «Дополнительно»:

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

Остальные параметры интуитивно понятны. Вот набор, проверенный на практике:

Кастомизация маркеров навигации: меняем круги на иконки

Стандартные кружочки в Scroll Navigation функциональны, но скучны. Заменить их на SVG-иконки, дело одного CSS-блока.

Ниже, готовый сниппет. Для каждой секции свой data-anchor и своя иконка. Иконки (SVG) предварительно загрузите в медиатеку WordPress и подставьте URL:

1
/* Общие стили для всех пунктов вертикального меню */
2
div.jet-scroll-navigation__dot {
3
    width: 40px;
4
    height: 40px;
5
    background-repeat: no-repeat;
6
    background-position: top;
7
    background-size: 40px;
8
    background-color: #f0f8ff00 !important;
9
    border-radius: 0% !important;
10
}
11
 
12
/* #1 */
13
[data-anchor="section_1"] div.jet-scroll-navigation__dot {
14
    background-image: url(/wp-content/uploads/2019/01/home.svg);
15
}
16
/* #2 */
17
[data-anchor="section_2"] div.jet-scroll-navigation__dot {
18
    background-image: url(/wp-content/uploads/2019/01/layers.svg);
19
}
20
/* #3 */
21
[data-anchor="section_3"] div.jet-scroll-navigation__dot {
22
    background-image: url(/wp-content/uploads/2019/01/suitcase.svg);
23
}
24
/* #4 */
25
[data-anchor="section_4"] div.jet-scroll-navigation__dot {
26
    background-image: url(/wp-content/uploads/2019/01/success.svg);
27
}
28
/* #5 */
29
[data-anchor="section_5"] div.jet-scroll-navigation__dot {
30
    background-image: url(/wp-content/uploads/2019/01/users.svg);
31
}
32
/* #6 */
33
[data-anchor="section_6"] div.jet-scroll-navigation__dot {
34
    background-image: url(/wp-content/uploads/2019/01/smartphone.svg);
35
}

Чтобы узнать data-anchor своей секции, откройте инструменты разработчика в браузере (F12), найдите элемент навигации и посмотрите значение атрибута.

Эффекты анимации: easing-библиотека

Стандартный easeOutExpo, лишь одна из десятков функций плавности, доступных через jQuery Easing. Полный каталог с визуализацией каждой кривой смотрите на easings.net.

Для подключения скачайте jquery.easing.1.3.js и подключите в футер аналогично Scrollify, обязательно до вызова $.scrollify(). После этого в параметре easing можно использовать любую функцию из каталога, от easeInOutCubic и easeOutBounce до easeInOutBack и десятков других.

Типичные проблемы и их решение

За несколько лет использования Scrollify на WordPress-сайтах собрался список повторяющихся граблей. Вот они с готовыми ответами.

Проблема 1. После подключения Scrollify первая секция отображается с отступом снизу примерно в 20 пикселей, при том что padding нигде не задан. Причина. Горизонтальный скролл, скрытый через overflow-x: hidden, технически присутствует в DOM. Scrollify честно учитывает его высоту при расчёте. Решение. Добавьте секции CSS-правило padding-bottom: 20px;.

Проблема 2. Скролл работает, но страницу сильно трясёт при прокрутке. Причина. Конфликт с другим jQuery-плагином или скриптом, который тоже манипулирует скроллом. Решение. Методично отключайте плагины по одному, проверяя поведение скролла после каждого отключения. Не забывайте чистить кеш браузера и сайта.

Проблема 3. Консоль разработчика выдаёт ошибку: Scrollify warning: ID matches hash value, this will cause the page to anchor. Причина. Какой-то плагин вставляет анкор в URL страницы, из-за чего Scrollify не может корректно определить текущую позицию. Например, на связке темы Zita и плагина Popups ситуация воспроизводилась стабильно. Решение. «Обезвредить» анкор в jQuery-скрипте через return false:

1
jQuery(document).ready(function ($) {
2
    $('.AddToAny_View').click(function () {
3
        SPU.show(1064);
4
        return false;
5
    });
6
});

Проблема 4. Scrollify должен работать только на главной странице и только для десктопа. Решение. Оберните вызов в проверку класса body и ширины окна:

1
if ($(window).width() > 1200 && $('body').hasClass('home')) {
2
    $.scrollify({
3
        // ваш конфиг
4
    });
5
}

Scrollify в 2026: альтернативы и вердикт

Scrollify не является единственным решением для секционной прокрутки. В 2026 году у разработчика WordPress есть как минимум три альтернативы:

CSS-свойство scroll-snap-type, нативная браузерная реализация без JavaScript. Работает быстро, но кастомизация анимации ограничена (нет easing, нельзя задать скорость). Для простых лендингов, отличный вариант.

Lenis, современный движок плавного скролла от студии Darkroom. Не привязывается к секциям жёстко, а создаёт эффект инерционной плавности. Интегрируется с Elementor через кастомный код.

Виджет Smooth Scroll от Unlimited Elements for Elementor, решение без кода, с визуальными настройками скорости и frame rate.

Но если нужна именно покадровая, предсказуемая прокрутка с навигацией и полным контролем над каждым аспектом, Scrollify остаётся рабочим и проверенным инструментом. 1800 звёзд на GitHub, открытые issues закрываются, скрипт живёт в продакшене на тысячах сайтов.

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

⁉️🤔 Частые вопросы

Обязательно ли использовать jQuery для Scrollify в 2026 году?

Да, Scrollify жёстко зависит от jQuery. Если ваш сайт полностью избавился от jQuery (например, вы используете Bricks или кастомную тему на чистом JS), лучше присмотритесь к Lenis или нативному scroll-snap-type. Но для типового WordPress-сайта jQuery почти наверняка уже загружен темой или одним из плагинов, дополнительной нагрузки не будет.

Что лучше для Elementor: Scrollify или встроенные эффекты движения?

Встроенные эффекты движения Elementor (Motion Effects) отвечают за анимацию элементов внутри секции (fade, slide), а не за поведение скролла между секциями. Это разные задачи. Scrollify управляет именно переходами между блоками, их можно и нужно сочетать.

Работает ли Scrollify с Elementor Flexbox Container?

Да, работает. Активируйте Flexbox Container в настройках Elementor, назначьте секциям CSS-класс через вкладку «Дополнительно» контейнера, механика та же, что и с классическими секциями.

Почему после обновления Elementor Scrollify перестал работать?

Скорее всего, слетел CSS-класс или ID секции. Elementor при крупных обновлениях иногда сбрасывает кастомные атрибуты. Проверьте, что поле «CSS класс» в каждой секции по-прежнему содержит .scrollify, а ID соответствуют тем, что прописаны в Scroll Navigation.

Можно ли использовать Scrollify на сайте без WordPress?

Да, Scrollify не привязан к WordPress или Elementor. Подключите jQuery и jquery.scrollify.js, разметьте HTML-секции нужным классом и вызовите $.scrollify(), всё будет работать на любом сайте, от чистого HTML до React (с оговорками на jQuery-зависимость).

Scrollify или альтернатива: что ставить под конкретную задачу

Выбор сводится к трём сценариям. Если у вас классический лендинг на Elementor с 5-8 секциями и вертикальной навигацией, Scrollify + JetElements Scroll Navigation дают готовый результат за час. Если вы стартуете новый проект без jQuery и хотите минимальных зависимостей, scroll-snap-type на CSS решит задачу парой строк. Если нужна плавность без жёсткой привязки к секциям, ставьте Lenis.

Главное, что показала практика: Scrollify не подводит там, где «модные» решения падают из-за конфликтов с тяжёлой экосистемой плагинов WordPress. Иногда стабильность важнее новизны.