Kui külastaja maandub Elementoris ehitatud lehel ja näeb tõmblevat kerimist koos hüpetega sektsioonide vahel, langeb usaldus saidi vastu kiiremini, kui kerimine jaluseni jõuab. Eriti kui leht on raske: taustavideo, parallaks-efektid, kümmekond animeeritud sektsiooni. Brauseri tavaline kerimine ei suuda sujuvalt plokkide piiridele lukustuda, vaid lihtsalt libiseb neist mööda.

Võite kulutada tunde puhverdamise pluginat, minifitseerimist ja muid lahendusi valides. Või lisada ühe kerge skripti, mis muudab konarlikud üleminekud sujuvaks sektsioonide vahetuseks, nagu kallitel maandumislehtedel.

Jutt käib Scrollify'st, Luke Haasi jQuery pluginast, mis on GitHubis olnud aastaid, kogunud üle 1800 tähe ja töötab endiselt seal, kus „moodsad" lahendused Elementoriga konfliktidesse komistavad. Ei mingeid tellimusi, ei hunnikuid sõltuvusi, üks .js fail ja kümmekond konfiguratsioonirida.

💡 Kiirülevaade:

• Scrollify paigaldamine: laadige skript GitHubist alla ja ühendage failis functions.php
• Sektsioonide seadistamine Elementoris: CSS klass, minimaalne kõrgus ja veerised
• Põhikonfiguratsioon: valikute scrollSpeed, easing, setHeights ja touchScroll lahtiseletus
• Vertikaalne navigatsioon: integreerimine JetElementsi Scroll Navigation vidinaga
• Peenhäälestus: tavaliste ringide asendamine SVG ikoonidega CSS-i abil
• Levinud probleemid: alumine veeris, kerimise värisemine, ankrukonflikt ja nende lahendused

Mis on Scrollify ja mis teeb selle eriliseks

Scrollify on jQuery plugin, mis sunnib kerimise jõuga sektsioonide piiridele. Kasutaja keerutab ratast, leht ei liigu sujuvalt, vaid hüppab järgmisele plokile. Käitumine meenutab mobiilirakenduses ekraanide vahel pühkimist, ainult et lauaarvutis ja hiirerattaga.

Peamine eelis on ennustatavus. Teate täpselt, millist plokki külastaja pärast kerimist näeb. Ei mingeid „ülekerimisi" ega poolikuid sektsioone. Plugin on optimeeritud puutetundlikele seadmetele ja suudab töötada dünaamilise sisuga, sektsioone saab laadida AJAX-i kaudu, Scrollify arvutab asukohad ümber.

Karbist võttes on saadaval: räsipõhine navigatsioon (otselingid sektsioonidele), katkestus sektsioonide vahel mittestandardsete plokkide jaoks (jalus, päis), tagasikutse funktsioonid before/after/afterRender/afterResize.

Paigaldamine ja põhikonfiguratsioon

Nõutav on jQuery 1.7 või uuem. 2026. aastal kõlab see arhailiselt, kuid praktikas tõmbab enamik WordPressi teemasid ja pluginaid endiselt jQuery jalusesse, konflikti ei teki.

Laadige jquery.scrollify.js alla GitHubi repositooriumist lukehaas/Scrollify ja ühendage see saidi jalusesse faili functions.php kaudu:

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

Lihtsaim käivitusvariant on suunata Scrollify kindla CSS klassiga elementidele:

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

Konfiguratsioonivalikute täielik nimekiri näeb välja selline:

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

Peamised parameetrid, mida tasub kohe kohendada: scrollSpeed (animatsiooni kiirus millisekundites, vaikimisi 1100, pikkade maandumislehtede puhul on parem vähendada 600-800 peale), setHeights (sektsiooni kõrguse automaatne sobitamine vaateaknaga), updateHash (lisab kerimisel URL-i #section-name).

Scrollify integreerimine Elementoriga: kolm sammu

Selleks, et Scrollify Elementoris ehitatud sektsioonid üles korjaks, tuleb need korrektselt märgendada. Suvaliselt paigutatud plokke ilma klassideta plugin lihtsalt ei näe.

1. Samm: määrake igale sektsioonile CSS klass

Avage Elementoris sektsiooni muutmine, minge vahekaardile „Täpsem" ja sisestage väljale „CSS klass" väärtus, näiteks .scrollify (ilma punktita, Elementor lisab selle ise). Klass peaks olema sama kõigile sektsioonidele, mis kaaderhaaval kerimises osalevad.

2. Samm: määrake minimaalne kõrgus

Katse-eksituse meetodil on selgunud: tõmblemise vältimiseks kerimisel vajavad sektsioonid minimaalset kõrgust 100vh ja nullitud veeriseid. Vahekaardil „Paigutus" määrake:

• Minimaalne kõrgus: 100 VH
• Padding: 0 igal küljel

3. Samm: kirjutage oma saidile konfiguratsioon

Allpool on toodud tootmiskonfiguratsioon, mida kasutatakse reaalsetes projektides. Ekraani laiust kontrollitakse, et mobiilseadmetes (alla 1000px) jääks kerimine tavaliseks, sektsioonhaaval kerimine on telefonis pigem takistus kui abi:

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

Märkus: nii .scrollify kui ka .footer antakse section-ile edasi. Jalus ei tohiks osaleda täisekraanilõikude kaupa kerimises tavalise sektsioonina (see on tavaliselt alla 100vh), kuid Scrollify peaks sellest teadma, selleks ongi standardScrollElements.

Vertikaalne navigatsioon JetElements Scroll Navigation abil

Kaadrikaupa kerimine ilma navigatsioonita on nagu raamat ilma sisukorrata. Et külastaja saaks ühe klõpsuga soovitud sektsiooni hüpata, lisame vertikaalse menüü.

Siin astub mängu Crocoblocki JetElements, üks võimsamaid lisavidinate komplekte Elementori jaoks. See sisaldab Scroll Navigation vidinat, mis joonistab vertikaalse paneeli punktindikaatoritega ja seob need sektsioonidega.

Pärast JetElementsi paigaldamist leia vidin paneelilt ja lohista see lehele. Järgneb kaks vastastikust tegevust.

Esiteks seo navigatsioon sektsioonidega. Vidina seadetes määra iga elemendi jaoks vastava sektsiooni ID:

Seejärel ava iga sektsioon Elementoris ja kirjuta sama ID väljale „CSS ID" vahekaardil „Täpsem":

Peamine seade, mida on parem mitte puutuda, on lüliti „Switch sections completely". Kui ploki sisu on füüsiliselt pikem kui kasutaja ekraan (näiteks väikese ekraaniga sülearvutil), lõigatakse osa sisust ära ja seda ei kuvata.

Ülejäänud parameetrid on intuitiivselt arusaadavad. Siin on praktikas end tõestanud komplekt:

Navigatsioonimarkerite kohandamine: ringide asendamine ikoonidega

Scroll Navigationi tavalised ringid on funktsionaalsed, kuid igavad. Nende asendamine SVG-ikoonidega on ühe CSS-ploki küsimus.

Allpool on valmis jupp. Iga sektsiooni jaoks oma data-anchor ja oma ikoon. Ikoonid (SVG) tuleks eelnevalt üles laadida WordPressi meediateeki ja asendada URL:

1
/* General styles for all vertical menu items */
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
}

Oma sektsiooni data-anchor leidmiseks ava brauseris arendajatööriistad (F12), leia navigatsioonielement ja vaata atribuudi väärtust.

Animatsiooniefektid: leevendusteek

Standard easeOutExpo on vaid üks paljudest silumisfunktsioonidest, mis on saadaval jQuery Easingu kaudu. Vaata täielikku kataloogi koos iga kõvera visualiseeringuga aadressil easings.net.

Ühendamiseks laadi alla jquery.easing.1.3.js ja ühenda see jaluses sarnaselt Scrollifyga, tingimata enne $.scrollify() väljakutsumist. Seejärel saad parameetris easing kasutada ükskõik millist kataloogi funktsiooni, alates easeInOutCubic ja easeOutBounce kuni easeInOutBack ja kümnete teisteni.

Levinud probleemid ja nende lahendused

Mitme aasta jooksul Scrollify kasutamisel WordPressi saitidel on kogunenud rida korduvaid komistuskive. Siin on need koos valmis vastustega.

Probleem 1. Pärast Scrollify ühendamist kuvatakse esimene sektsioon umbes 20 piksli suuruse alumise veerisega, kuigi polsterdust pole kuskil määratud. Põhjus. Horisontaalne kerimine, mis on peidetud atribuudiga overflow-x: hidden, on DOM-is tehniliselt olemas. Scrollify arvestab ausalt selle kõrgust arvutustes. Lahendus. Lisa sektsioonile CSS-reegel padding-bottom: 20px;.

Probleem 2. Kerimine töötab, kuid leht väriseb kerimisel tugevalt. Põhjus. Konflikt mõne teise jQuery pistikprogrammi või skriptiga, mis samuti kerimist manipuleerib. Lahendus. Lülita pistikprogramme metoodiliselt ükshaaval välja, kontrollides kerimise käitumist pärast iga väljalülitamist. Ära unusta tühjendada brauseri ja saidi vahemälu.

Probleem 3. Arendaja konsool annab veateate: Scrollify warning: ID matches hash value, this will cause the page to anchor. Põhjus. Mõni pistikprogramm lisab lehe URL-i ankru, mille tõttu ei suuda Scrollify praegust asukohta õigesti määrata. Näiteks Zita teema ja Popups pistikprogrammi kombinatsioonil taastoodeti olukord stabiilselt. Lahendus. „Neutraliseeri" ankur jQuery skriptis käsuga return false:

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

Probleem 4. Scrollify peaks töötama ainult avalehel ja ainult lauaarvutis. Lahendus. Ümbritse väljakutse body klassi ja akna laiuse kontrolliga:

1
if ($(window).width() > 1200 && $('body').hasClass('home')) {
2
    $.scrollify({
3
        // your config
4
    });
5
}

Scrollify 2026. aastal: alternatiivid ja otsus

Scrollify ei ole ainus lahendus sektsioonipõhiseks kerimiseks. 2026. aastal on WordPressi arendajal vähemalt kolm alternatiivi:

CSS atribuut scroll-snap-type, brauseri loomulik teostus ilma JavaScriptita. Töötab kiiresti, kuid animatsiooni kohandamine on piiratud (puudub sujuvuse muutmine, ei saa määrata kiirust). Lihtsate maandumislehtede jaoks suurepärane valik.

Lenis, Darkroom stuudio kaasaegne sujuva kerimise mootor. Ei seo end jäigalt sektsioonidega, vaid loob inertse sujuvuse efekti. Integreerub Elementoriga kohandatud koodi kaudu.

Smooth Scroll vidin Unlimited Elements for Elementorist, koodivaba lahendus visuaalsete seadistustega kiirusele ja kaadrisagedusele.

Kuid kui vajate täpselt kaaderhaaval etteaimatavat kerimist koos navigatsiooni ja täieliku kontrolliga iga aspekti üle, jääb Scrollify töötavaks ja tõestatud tööriistaks. 1800 tähte GitHubis, avatud veateated suletakse, skript elab tootmises tuhandetel saitidel.

Vaata lühikest videot sujuva kerimise seadistamisest Elementoris, kogu protsess vidina paigaldamisest lõpptulemuseni on selgelt näidatud:

⁉️🤔 Korduma kippuvad küsimused

Kas Scrollify vajab 2026. aastal jQueryt?

Jah, Scrollify sõltub tihedalt jQueryst. Kui teie sait on jQueryst täielikult loobunud (näiteks kasutate Bricksi või kohandatud teemat puhtal JS-il), on parem vaadata Lenise või loomuliku scroll-snap-type poole. Kuid tüüpilisel WordPressi saidil on jQuery peaaegu kindlasti juba teema või mõne pistikprogrammi poolt laaditud, täiendavat koormust ei teki.

Mis on Elementori jaoks parem: Scrollify või sisseehitatud liikumisefektid?

Elementori sisseehitatud Motion Effects vastutavad elementide animeerimise eest sektsiooni sees (hajumine, libisemine), mitte kerimise käitumise eest sektsioonide vahel. Need on erinevad ülesanded. Scrollify kontrollib just plokkidevahelisi üleminekuid, neid saab ja tuleks kombineerida.

Kas Scrollify töötab Elementor Flexbox Containeriga?

Jah, töötab. Aktiveeri Flexbox Container Elementori seadetes, määra sektsioonidele CSS klass konteineri vahekaardi „Advanced" kaudu, mehaanika on sama mis klassikaliste sektsioonidega.

Miks Scrollify lakkas töötamast pärast Elementori uuendamist?

Tõenäoliselt lähtestati sektsiooni CSS klass või ID. Elementor lähtestab suuremate uuenduste korral mõnikord kohandatud atribuudid. Kontrolli, et iga sektsiooni väli „CSS class" sisaldaks endiselt .scrollify ja ID-d ühtiksid Scroll Navigationis kirjutatutega.

Kas Scrollifyt saab kasutada saidil ilma WordPressita?

Jah, Scrollify ei ole seotud WordPressi ega Elementoriga. Ühenda jQuery ja jquery.scrollify.js, märgenda HTML-sektsioonid vajaliku klassiga ja kutsu välja $.scrollify(), kõik töötab igal saidil, alates puhtast HTML-ist kuni Reactini (mööndustega jQuery sõltuvuse osas).

Scrollify või alternatiiv: mida konkreetse ülesande jaoks kasutada

Valik taandub kolmele stsenaariumile. Kui sul on klassikaline Elementoril põhinev maandumisleht 5-8 sektsiooni ja vertikaalse navigatsiooniga, annavad Scrollify + JetElements Scroll Navigation valmis tulemuse tunniga. Kui alustad uut projekti ilma jQueryta ja soovid minimaalseid sõltuvusi, lahendab scroll-snap-type CSS-is ülesande paari reaga. Kui vajad sujuvust ilma jäiga sektsioonidega sidumiseta, kasuta Lenist.

Peamine, mida praktika on näidanud: Scrollify ei vea alt seal, kus „trendikad" lahendused WordPressi pistikprogrammide raske ökosüsteemiga konfliktide tõttu läbi kukuvad. Mõnikord on stabiilsus olulisem kui uudsus.