Kiedy odwiedzający wchodzi na landing page zbudowany w Elementorze i widzi szarpane przewijanie z przeskokami między sekcjami, zaufanie do witryny spada szybciej, niż scroll dociera do stopki. Szczególnie gdy strona jest ciężka: wideo w tle, efekty parallax, kilkanaście sekcji z animacjami. Standardowy scroll przeglądarki nie potrafi płynnie zatrzymywać się na granicach bloków, po prostu przejeżdża obok.

Można spędzić godziny na dobieraniu wtyczek cache'ujących, minifikacji i szamańskich rytuałach. A można podłączyć jeden lekki skrypt, który zamienia poszarpane przejścia w płynne przewijanie sekcji, jak na drogich landing page'ach.

Mowa o Scrollify, wtyczce jQuery autorstwa Luke'a Haasa, która od wielu lat żyje na GitHubie, zebrała ponad 1800 gwiazdek i wciąż działa tam, gdzie „nowoczesne" rozwiązania potykają się o konflikty z Elementorem. Żadnych subskrypcji, żadnych ton zależności, jeden plik .js i kilkanaście linii konfiguracji.

💡 Szybki przegląd:

• Instalacja Scrollify: pobranie skryptu z GitHuba i podpięcie w functions.php
• Konfiguracja sekcji w Elementorze: klasa CSS, minimalna wysokość i odstępy
• Podstawowa konfiguracja: omówienie opcji scrollSpeed, easing, setHeights i touchScroll
• Nawigacja pionowa: powiązanie z widżetem Scroll Navigation z JetElements
• Dostrajanie: zamiana standardowych kółek na ikony SVG przez CSS
• Typowe problemy: odstęp na dole, trzęsienie scrolla, konflikt kotwic i ich rozwiązywanie

Czym jest Scrollify i na czym polega jego zaleta

Scrollify to wtyczka jQuery, która wymusza przyciąganie scrolla do granic sekcji. Użytkownik kręci kółkiem, strona nie przesuwa się płynnie, tylko przełącza się do następnego bloku. Zachowanie przypomina swipe między ekranami w aplikacji mobilnej, tyle że na desktopie i za pomocą kółka myszy.

Główna zaleta to przewidywalność. Dokładnie wiadomo, który blok zobaczy odwiedzający po przewinięciu. Żadnych „przelotów" i wpółprzewiniętych sekcji. Wtyczka jest zoptymalizowana pod urządzenia dotykowe i potrafi pracować z dynamiczną treścią, można doładowywać sekcje przez AJAX, Scrollify przeliczy pozycje.

Od razu po instalacji dostępne są: nawigacja z hashem (bezpośrednie linki do sekcji), przerwy między sekcjami dla niestandardowych bloków (stopka, nagłówek), funkcje callback before/after/afterRender/afterResize.

Instalacja i podstawowa konfiguracja

Do działania potrzebny jest jQuery 1.7 lub nowszy. W 2026 roku brzmi to archaicznie, ale w praktyce większość motywów i wtyczek WordPressa wciąż wciąga jQuery do stopki, konfliktu nie będzie.

Pobierz jquery.scrollify.js z repozytorium GitHub lukehaas/Scrollify i podepnij go w stopce witryny przez 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
});

Najprostszy wariant uruchomienia to skierowanie Scrollify na elementy z określoną klasą CSS:

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

Pełna lista opcji konfiguracji wygląda następująco:

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
});

Kluczowe parametry, które warto od razu zmienić: scrollSpeed (szybkość animacji w milisekundach, domyślnie 1100, dla długich landing page'y lepiej obniżyć do 600-800), setHeights (automatyczne dopasowanie wysokości sekcji do viewportu), updateHash (dodaje #section-name do URL podczas scrollowania).

Integracja Scrollify z Elementorem: trzy kroki

Aby Scrollify przechwycił sekcje zbudowane w Elementorze, trzeba je poprawnie oznaczyć. Chaotycznie porozrzucanych bloków bez klas wtyczka po prostu nie zobaczy.

Krok 1: przypisujemy klasę CSS każdej sekcji

Otwórz edycję sekcji w Elementorze, przejdź na zakładkę „Zaawansowane" i w polu „Klasa CSS" wpisz wartość, na przykład .scrollify (bez kropki, Elementor dodaje ją sam). Klasa musi być taka sama dla wszystkich sekcji biorących udział w kadrowym przewijaniu.

Krok 2: ustawiamy minimalną wysokość

Doświadczalnie ustalono: aby uniknąć szarpnięć podczas scrollowania, sekcje potrzebują minimalnej wysokości 100vh i odstępów wyzerowanych do zera. Na zakładce „Układ" ustaw:

• Minimalna wysokość: 100 VH
• Odstępy wewnętrzne (padding): 0 ze wszystkich stron

Krok 3: wpisujemy konfigurację pod swoją witrynę

Poniżej bojowy konfig, który jest używany na rzeczywistych projektach. Szerokość ekranu jest sprawdzana po to, aby na urządzeniach mobilnych (poniżej 1000px) scroll pozostał zwykły, sekcyjne przewijanie na telefonie raczej przeszkadza, niż pomaga:

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
});

Proszę zwrócić uwagę: do section przekazano zarówno .scrollify, jak i .footer. Stopka nie powinna brać udziału w przewijaniu klatkowym jako pełnoprawna sekcja (zazwyczaj jest mniejsza niż 100vh), ale Scrollify musi o niej wiedzieć, do tego służy standardScrollElements.

Nawigacja pionowa przez JetElements Scroll Navigation

Przewijanie klatkowe bez nawigacji jest jak książka bez spisu treści. Aby odwiedzający mógł jednym kliknięciem przeskoczyć do wybranej sekcji, dodamy menu pionowe.

Tutaj na scenę wkracza JetElements od Crocoblock, jeden z najpotężniejszych zestawów dodatkowych widżetów dla Elementora. W jego skład wchodzi widżet Scroll Navigation, który rysuje pionowy panel z kropkami-wskaźnikami i wiąże je z sekcjami.

Po zainstalowaniu JetElements proszę znaleźć widżet w panelu i przeciągnąć go na stronę. Następnie dwie czynności do wykonania po obu stronach.

Najpierw proszę powiązać nawigację z sekcjami. W ustawieniach widżetu dla każdej pozycji należy wskazać ID odpowiedniej sekcji:

Następnie proszę otworzyć każdą sekcję w Elementorze i wpisać to samo ID w polu „CSS ID" na karcie „Zaawansowane":

Główne ustawienie, którego lepiej nie ruszać, to przełącznik „Przełączanie sekcji w całości". Jeśli zawartość bloku jest fizycznie wyższa niż ekran użytkownika (na przykład na laptopie z małym wyświetlaczem), część treści zostanie obcięta i nie będzie widoczna.

Pozostałe parametry są intuicyjne. Oto zestaw sprawdzony w praktyce:

Dostosowywanie znaczników nawigacji: zamiana kółek na ikony

Standardowe kółka w Scroll Navigation są funkcjonalne, ale nudne. Zastąpienie ich ikonami SVG to kwestia jednego bloku CSS.

Poniżej gotowy snippet. Dla każdej sekcji własny data-anchor i własna ikona. Ikony (SVG) proszę wcześniej załadować do biblioteki multimediów WordPress i podstawić 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
}

Aby poznać data-anchor swojej sekcji, proszę otworzyć narzędzia deweloperskie w przeglądarce (F12), znaleźć element nawigacji i sprawdzić wartość atrybutu.

Efekty animacji: biblioteka easing

Standardowy easeOutExpo, tylko jedna z dziesiątków funkcji wygładzania dostępnych przez jQuery Easing. Pełny katalog z wizualizacją każdej krzywej znajdą Państwo na easings.net.

Aby podłączyć, proszę pobrać jquery.easing.1.3.js i umieścić w stopce analogicznie jak Scrollify, koniecznie przed wywołaniem $.scrollify(). Następnie w parametrze easing można użyć dowolnej funkcji z katalogu, od easeInOutCubic i easeOutBounce po easeInOutBack i dziesiątki innych.

Typowe problemy i ich rozwiązania

Przez kilka lat używania Scrollify na stronach WordPress zebrała się lista powtarzających się wpadek. Oto one wraz z gotowymi odpowiedziami.

Problem 1. Po podłączeniu Scrollify pierwsza sekcja wyświetla się z odstępem od dołu wynoszącym około 20 pikseli, mimo że nigdzie nie zdefiniowano paddingu. Przyczyna. Poziomy pasek przewijania, ukryty przez overflow-x: hidden, technicznie wciąż istnieje w DOM. Scrollify uczciwie uwzględnia jego wysokość podczas obliczeń. Rozwiązanie. Proszę dodać sekcji regułę CSS padding-bottom: 20px;.

Problem 2. Przewijanie działa, ale strona mocno się trzęsie podczas scrollowania. Przyczyna. Konflikt z inną wtyczką jQuery lub skryptem, który również manipuluje przewijaniem. Rozwiązanie. Proszę metodycznie wyłączać wtyczki pojedynczo, sprawdzając zachowanie scrolla po każdym wyłączeniu. Należy pamiętać o czyszczeniu pamięci podręcznej przeglądarki i strony.

Problem 3. Konsola deweloperska wyświetla błąd: Scrollify warning: ID matches hash value, this will cause the page to anchor. Przyczyna. Jakaś wtyczka wstawia kotwicę do adresu URL strony, przez co Scrollify nie może poprawnie określić bieżącej pozycji. Na przykład na połączeniu motywu Zita i wtyczki Popups sytuacja ta powtarzała się regularnie. Rozwiązanie. „Zneutralizować" kotwicę w skrypcie jQuery przez return false:

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

Problem 4. Scrollify ma działać tylko na stronie głównej i tylko dla komputerów stacjonarnych. Rozwiązanie. Proszę opakować wywołanie w sprawdzenie klasy body i szerokości okna:

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

Scrollify w 2026: alternatywy i werdykt

Scrollify nie jest jedynym rozwiązaniem do przewijania sekcyjnego. W 2026 roku deweloper WordPress ma co najmniej trzy alternatywy:

Właściwość CSS scroll-snap-type, natywna implementacja przeglądarkowa bez JavaScript. Działa szybko, ale personalizacja animacji jest ograniczona (brak easing, nie można ustawić prędkości). Dla prostych landing page’ów to doskonała opcja.

Lenis, nowoczesny silnik płynnego przewijania od studia Darkroom. Nie wiąże się sztywno z sekcjami, lecz tworzy efekt inercyjnej płynności. Integruje się z Elementorem poprzez niestandardowy kod.

Widżet Smooth Scroll od Unlimited Elements for Elementor, rozwiązanie bez kodowania, z wizualnymi ustawieniami prędkości i frame rate.

Jeśli jednak potrzebne jest właśnie klatkowe, przewidywalne przewijanie z nawigacją i pełną kontrolą nad każdym aspektem, Scrollify pozostaje działającym i sprawdzonym narzędziem. 1800 gwiazdek na GitHubie, otwarte zgłoszenia są zamykane, skrypt żyje w produkcji na tysiącach stron.

Proszę obejrzeć krótki film z konfiguracji płynnego przewijania w Elementorze, który pokazuje cały proces od instalacji widżetu do końcowego rezultatu:

⁉️🤔 Często zadawane pytania

Czy w 2026 roku koniecznie trzeba używać jQuery do Scrollify?

Tak, Scrollify jest ściśle zależny od jQuery. Jeśli Państwa strona całkowicie pozbyła się jQuery (na przykład używają Państwo Bricks lub niestandardowego motywu na czystym JS), lepiej przyjrzeć się Lenis lub natywnemu scroll-snap-type. Jednak dla typowej strony WordPress jQuery jest prawie na pewno już załadowane przez motyw lub jedną z wtyczek, więc dodatkowego obciążenia nie będzie.

Co jest lepsze dla Elementora: Scrollify czy wbudowane efekty ruchu?

Wbudowane efekty ruchu Elementora (Motion Effects) odpowiadają za animację elementów wewnątrz sekcji (fade, slide), a nie za zachowanie przewijania między sekcjami. To różne zadania. Scrollify zarządza właśnie przejściami między blokami i można je, a nawet należy, łączyć.

Czy Scrollify działa z Elementor Flexbox Container?

Tak, działa. Proszę aktywować Flexbox Container w ustawieniach Elementora, przypisać sekcjom klasę CSS w zakładce „Zaawansowane" kontenera, mechanika jest taka sama jak w przypadku klasycznych sekcji.

Dlaczego po aktualizacji Elementora Scrollify przestał działać?

Najprawdopodobniej zresetowała się klasa CSS lub ID sekcji. Elementor podczas dużych aktualizacji czasami kasuje niestandardowe atrybuty. Proszę sprawdzić, czy pole „Klasa CSS" w każdej sekcji nadal zawiera .scrollify, a ID odpowiadają tym zapisanym w Scroll Navigation.

Czy można używać Scrollify na stronie bez WordPress?

Tak, Scrollify nie jest związany z WordPressem ani Elementorem. Proszę podłączyć jQuery oraz jquery.scrollify.js, oznaczyć sekcje HTML odpowiednią klasą i wywołać $.scrollify(), wszystko będzie działać na każdej stronie, od czystego HTML po React (z zastrzeżeniami dotyczącymi zależności od jQuery).

Scrollify czy alternatywa: co wdrożyć pod konkretne zadanie

Wybór sprowadza się do trzech scenariuszy. Jeśli mają Państwo klasyczny landing page na Elementor z 5-8 sekcjami i nawigacją pionową, Scrollify + JetElements Scroll Navigation dają gotowy rezultat w godzinę. Jeśli zaczynają Państwo nowy projekt bez jQuery i chcą minimalnych zależności, scroll-snap-type w CSS rozwiąże zadanie kilkoma linijkami. Jeśli potrzebna jest płynność bez sztywnego wiązania z sekcjami, proszę wdrożyć Lenis.

Najważniejsze, co pokazała praktyka: Scrollify nie zawodzi tam, gdzie „modne" rozwiązania padają z powodu konfliktów z ciężkim ekosystemem wtyczek WordPress. Czasem stabilność jest ważniejsza niż nowość.