Коли відвідувач заходить на лендинг, зібраний в 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. Іноді стабільність важливіша за новизну.