Kun kävijä saapuu Elementorilla rakennetulle sivulle ja näkee nykivää vieritystä, jossa hypitään osioiden välillä, luottamus sivustoon romahtaa nopeammin kuin vieritys ehtii alatunnisteeseen. Varsinkin jos sivu on raskas: taustavideo, parallaksiefektejä, tusina animoitua osiota. Selaimen tavallinen vieritys ei pysty lukittumaan pehmeästi lohkojen rajoihin, se vain liukuu niiden ohi.

Voit käyttää tunteja välimuistin lisäosien, minifioinnin ja kiertotapojen valitsemiseen. Tai voit lisätä yhden kevyen skriptin, joka muuttaa karkeat siirtymät sulavaksi osioiden vaihteluksi, kuten kalliilla laskeutumissivuilla.

Puhumme Scrollify-nimisestä jQuery-lisäosasta, jonka on tehnyt Luke Haas ja joka on ollut GitHubissa vuosia, kerännyt yli 1800 tähteä ja toimii edelleen siellä, missä "modernit" ratkaisut törmäävät yhteensopivuusongelmiin Elementorin kanssa. Ei tilauksia, ei valtavia määriä riippuvuuksia, yksi .js-tiedosto ja tusinan verran konfigurointirivejä.

💡 Nopea yleiskatsaus:

• Scrollifyn asentaminen: lataa skripti GitHubista ja liitä se functions.php-tiedostossa
• Osioiden määrittely Elementorissa: CSS-luokka, vähimmäiskorkeus ja marginaalit
• Peruskonfiguraatio: scrollSpeed-, easing-, setHeights- ja touchScroll-asetusten läpikäynti
• Pystysuuntainen navigaatio: integrointi JetElementsin Scroll Navigation -widgetin kanssa
• Hienosäätö: tavallisten ympyröiden korvaaminen SVG-kuvakkeilla CSS:n avulla
• Yleiset ongelmat: alamarginaali, vierityksen tärinä, ankkurikonflikti ja niiden ratkaisut

Mikä Scrollify on ja mikä siinä on erityistä

Scrollify on jQuery-lisäosa, joka pakottaa vierityksen lukittumaan osioiden rajoihin. Käyttäjä pyörittää rullaa, sivu ei liiku tasaisesti, vaan napsahtaa seuraavaan lohkoon. Toiminta muistuttaa näyttöjen välillä pyyhkäisemistä mobiilisovelluksessa, mutta työpöydällä ja hiiren rullan kautta.

Tärkein etu on ennustettavuus. Tiedät tarkalleen, minkä lohkon kävijä näkee vierityksen jälkeen. Ei "ylilyöntejä" eikä puoliksi vieritettyjä osioita. Lisäosa on optimoitu kosketuslaitteille ja voi toimia dynaamisen sisällön kanssa, voit ladata osioita AJAXilla, Scrollify laskee sijainnit uudelleen.

Valmiina on saatavilla: hash-navigaatio (suorat linkit osioihin), keskeytys osioiden välillä epästandardeille lohkoille (alatunniste, ylätunniste), callback-funktiot before/after/afterRender/afterResize.

Asennus ja peruskonfiguraatio

jQuery 1.7 tai uudempi vaaditaan. Vuonna 2026 tämä kuulostaa vanhanaikaiselta, mutta käytännössä useimmat WordPress-teemat ja lisäosat lataavat edelleen jQueryn alatunnisteeseen, joten ristiriitaa ei synny.

Lataa jquery.scrollify.js GitHub-repositoriosta lukehaas/Scrollify ja liitä se sivuston alatunnisteeseen functions.php-tiedoston kautta:

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

Yksinkertaisin käynnistysvaihtoehto on osoittaa Scrollify elementteihin, joilla on tietty CSS-luokka:

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

Konfigurointiasetusten täydellinen lista näyttää tältä:

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

Keskeiset parametrit, jotka kannattaa säätää heti: scrollSpeed (animaation nopeus millisekunneissa, oletus 1100, pitkillä laskeutumissivuilla parempi vähentää 600-800:aan), setHeights (säädä osion korkeus automaattisesti näkymään), updateHash (lisää #section-name URL-osoitteeseen vieritettäessä).

Scrollifyn integrointi Elementorin kanssa: kolme vaihetta

Jotta Scrollify havaitsee Elementorilla rakennetut osiot, ne on merkittävä oikein. Satunnaisesti sijoitetut lohkot ilman luokkia jäävät yksinkertaisesti lisäosalta huomaamatta.

Vaihe 1: anna CSS-luokka jokaiselle osiolle

Avaa osion muokkaus Elementorissa, siirry "Lisäasetukset"-välilehdelle ja kirjoita "CSS-luokka"-kenttään arvo, esimerkiksi .scrollify (ilman pistettä, Elementor lisää sen itse). Luokan tulee olla sama kaikille ruutu kerrallaan etenevään vieritykseen osallistuville osioille.

Vaihe 2: aseta vähimmäiskorkeus

Yrityksen ja erehdyksen kautta havaittiin: jotta vältetään nykiminen vieritettäessä, osiot tarvitsevat vähimmäiskorkeudeksi 100vh ja marginaalit nollattuna. "Asettelu"-välilehdellä aseta:

• Vähimmäiskorkeus: 100 VH
• Täyte: 0 kaikilla sivuilla

Vaihe 3: kirjoita konfiguraatio sivustollesi

Alla on tuotantokonfiguraatio, jota on käytetty oikeissa projekteissa. Näytön leveys tarkistetaan, jotta mobiililaitteilla (alle 1000px) vieritys pysyy normaalina, osioittainen vieritys puhelimessa on enemmän haitta kuin hyöty:

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

Huomio: sekä .scrollify että .footer välitetään section-parametrille. Footerin ei pitäisi osallistua ruutu kerrallaan -vieritykseen kokonaisena osiona (se on yleensä alle 100vh), mutta Scrollifyn on hyvä tietää siitä, ja juuri sitä varten standardScrollElements on olemassa.

Pystynavigaatio JetElements Scroll Navigationilla

Ruutu kerrallaan -vieritys ilman navigaatiota on kuin kirja ilman sisällysluetteloa. Jotta kävijä voi hypätä haluamaansa osioon yhdellä klikkauksella, lisätään pystyvalikko.

Tässä kohtaa kuvaan astuu Crocoblockin JetElements, yksi Elementorin tehokkaimmista lisäwidget-sarjoista. Se sisältää Scroll Navigation -widgetin, joka piirtää pystypaneelin pisteindikaattoreineen ja linkittää ne osioihin.

Kun olet asentanut JetElementsin, etsi widget paneelista ja vedä se sivulle. Seuraavaksi tehdään kaksi vastavuoroista toimenpidettä.

Ensimmäiseksi linkitä navigaatio osioihin. Widgetin asetuksissa määritä jokaiselle kohteelle vastaavan osion ID:

Avaa sitten jokainen osio Elementorissa ja kirjoita sama ID "CSS ID" -kenttään "Lisäasetukset"-välilehdellä:

Pääasetus, johon on parempi olla koskematta, on "Switch sections completely" -kytkin. Jos lohkon sisältö on fyysisesti korkeampi kuin käyttäjän näyttö (esimerkiksi kannettavalla tietokoneella pienellä näytöllä), osa sisällöstä leikkautuu pois eikä näy.

Loput parametrit ovat intuitiivisesti selkeitä. Tässä on käytännössä hyväksi havaittu kokoonpano:

Navigaatiomerkkien muokkaus: ympyröiden vaihtaminen kuvakkeiksi

Scroll Navigationin vakioympyrät ovat toimivia mutta tylsiä. Niiden korvaaminen SVG-kuvakkeilla onnistuu yhdellä CSS-lohkolla.

Alla on valmis koodinpätkä. Jokaiselle osiolle tulee oma data-anchor ja oma kuvake. Kuvakkeet (SVG) tulee ladata etukäteen WordPressin mediakirjastoon, ja URL korvataan:

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
}

Löytääksesi osiosi data-anchor-attribuutin avaa selaimen kehittäjätyökalut (F12), etsi navigaatioelementti ja katso attribuutin arvo.

Animaatiotehosteet: easing-kirjasto

Tavallinen easeOutExpo on vain yksi kymmenistä pehmennysfunktioista, jotka ovat käytettävissä jQuery Easingin kautta. Katso koko katalogi ja jokaisen käyrän visualisointi osoitteesta easings.net.

Ota käyttöön lataamalla jquery.easing.1.3.js ja liitä se footeriin samaan tapaan kuin Scrollify, välttämättä ennen $.scrollify()-kutsua. Tämän jälkeen easing-parametrissa voit käyttää mitä tahansa katalogin funktiota, aina easeInOutCubic- ja easeOutBounce-funktioista easeInOutBack-funktioon ja kymmeniin muihin.

Yleiset ongelmat ja niiden ratkaisut

Usean vuoden Scrollifyn käytön aikana WordPress-sivustoilla on kertynyt lista toistuvia sudenkuoppia. Tässä ne ovat valmiine vastauksineen.

Ongelma 1. Scrollifyn liittämisen jälkeen ensimmäinen osio näkyy noin 20 pikselin alamarginaalilla, vaikka täytettä ei ole asetettu missään. Syy. Vaakasuuntainen vieritys, joka on piilotettu overflow-x: hidden -määrityksellä, on teknisesti olemassa DOMissa. Scrollify huomioi rehellisesti sen korkeuden laskelmissaan. Ratkaisu. Lisää CSS-sääntö padding-bottom: 20px; osioon.

Ongelma 2. Vieritys toimii, mutta sivu tärisee voimakkaasti vieritettäessä. Syy. Ristiriita toisen jQuery-liitännäisen tai skriptin kanssa, joka myös käsittelee vieritystä. Ratkaisu. Ota liitännäisiä pois käytöstä järjestelmällisesti yksi kerrallaan ja tarkista vierityksen toiminta jokaisen poiskytkennän jälkeen. Muista tyhjentää selaimen ja sivuston välimuisti.

Ongelma 3. Kehittäjäkonsoli antaa virheen: Scrollify warning: ID matches hash value, this will cause the page to anchor. Syy. Jokin liitännäinen lisää ankkurin sivun URL-osoitteeseen, minkä vuoksi Scrollify ei pysty määrittämään nykyistä sijaintia oikein. Esimerkiksi Zita-teeman ja Popups-liitännäisen yhdistelmällä tilanne toistui vakaasti. Ratkaisu. "Neutraloi" ankkuri jQuery-skriptissä return false -määrityksellä:

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

Ongelma 4. Scrollifyn tulisi toimia vain etusivulla ja vain työpöytäversiossa. Ratkaisu. Kääri kutsu tarkistukseen, joka katsoo body-luokan ja ikkunan leveyden:

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

Scrollify vuonna 2026: vaihtoehdot ja tuomio

Scrollify ei ole ainoa ratkaisu osiokohtaiseen vieritykseen. Vuonna 2026 WordPress-kehittäjällä on vähintään kolme vaihtoehtoa:

CSS-ominaisuus scroll-snap-type, selaimen natiivitoteutus ilman JavaScriptiä. Toimii nopeasti, mutta animaation mukautus on rajallista (ei easing-toimintoa, nopeutta ei voi asettaa). Yksinkertaisille laskeutumissivuille erinomainen vaihtoehto.

Lenis, Darkroom-studion moderni sulavan vierityksen moottori. Ei sido jäykästi osioihin, vaan luo inertiä sulavuutta. Integroituu Elementoriin mukautetun koodin kautta.

Smooth Scroll -widget Unlimited Elements for Elementor -lisäosasta, kooditon ratkaisu, jossa on visuaaliset asetukset nopeudelle ja kuvataajuudelle.

Mutta jos tarvitset juuri ruutu kerrallaan etenevää, ennakoitavaa vieritystä navigaatioineen ja täydellisine hallintamahdollisuuksineen, Scrollify on yhä toimiva ja testattu työkalu. 1800 tähteä GitHubissa, avoimet tikettiratkaisut suljetaan, skripti elää tuotannossa tuhansilla sivustoilla.

Katso lyhyt video sulavan vierityksen määrittämisestä Elementorissa, koko prosessi widgetin asennuksesta lopputulokseen näytetään selkeästi:

⁉️🤔 Usein kysytyt kysymykset

Tarvitaanko jQueryä Scrollifyyn vuonna 2026?

Kyllä, Scrollify on tiukasti riippuvainen jQuerystä. Jos sivustosi on kokonaan luopunut jQuerystä (esimerkiksi käytät Bricksiä tai räätälöityä teemaa puhtaalla JS:llä), katso mieluummin Lenis- tai natiivia scroll-snap-type -ratkaisua. Mutta tyypillisellä WordPress-sivustolla jQuery on lähes varmasti jo ladattu teeman tai jonkin liitännäisen toimesta, lisäkuormaa ei tule.

Kumpi on parempi Elementorille: Scrollify vai sisäänrakennetut liike-efektit?

Elementorin sisäänrakennetut Motion Effects -efektit vastaavat elementtien animoinnista osion sisällä (häivytys, liuku), eivät osioiden välisestä vierityskäyttäytymisestä. Nämä ovat eri tehtäviä. Scrollify ohjaa nimenomaan lohkojen välisiä siirtymiä, niitä voi ja pitää yhdistellä.

Toimiiko Scrollify Elementor Flexbox Containerin kanssa?

Kyllä, se toimii. Ota Flexbox Container käyttöön Elementorin asetuksissa, määritä CSS-luokka osioille kontin "Advanced"-välilehden kautta, mekaniikka on sama kuin perinteisillä osioilla.

Miksi Scrollify lakkasi toimimasta Elementorin päivityksen jälkeen?

Todennäköisesti osion CSS-luokka tai ID nollautui. Elementor suurissa päivityksissä joskus nollaa mukautetut attribuutit. Tarkista, että jokaisen osion "CSS class" -kentässä on edelleen .scrollify ja ID:t vastaavat Scroll Navigationiin kirjoitettuja.

Voiko Scrollifyä käyttää sivustolla ilman WordPressiä?

Kyllä, Scrollify ei ole sidottu WordPressiin tai Elementoriin. Liitä jQuery ja jquery.scrollify.js, merkitse HTML-osiot tarvittavalla luokalla ja kutsu $.scrollify(), kaikki toimii millä tahansa sivustolla puhtaasta HTML:stä Reactiin (varauksin jQuery-riippuvuudesta).

Scrollify vai vaihtoehto: mitä käyttää mihinkin tehtävään

Valinta tiivistyy kolmeen skenaarioon. Jos sinulla on klassinen laskeutumissivu Elementorilla, jossa on 5-8 osiota ja pystysuuntainen navigaatio, Scrollify + JetElements Scroll Navigation antavat valmiin tuloksen tunnissa. Jos aloitat uuden projektin ilman jQueryä ja haluat minimaaliset riippuvuudet, scroll-snap-type CSS:llä ratkaisee tehtävän parilla rivillä. Jos tarvitset sulavuutta ilman jäykkää sidontaa osioihin, käytä Lenis-moottoria.

Tärkein asia, jonka käytäntö on osoittanut: Scrollify ei petä siellä, missä "trendikkäät" ratkaisut kaatuvat ristiriitoihin raskaan WordPress-liitännäisekosysteemin kanssa. Joskus vakaus on tärkeämpää kuin uutuus.