Når en besøkende lander på en side bygget i Elementor og opplever hakkete rulling med hopp mellom seksjoner, faller tilliten til nettstedet raskere enn rullingen når bunnteksten. Særlig hvis siden er tung: bakgrunnsvideo, parallakseeffekter, et dusin seksjoner med animasjon. Nettleserens standardrulling kan ikke låse seg jevnt til blokkgrenser, den glir bare forbi dem.

Du kan bruke timevis på å velge bufrings-programtillegg, minifisering og løsninger. Eller du kan legge til et lettvekts skript som forvandler røffe overganger til jevn seksjonsveksling, slik som på dyre landingssider.

Vi snakker om Scrollify, et jQuery-programtillegg av Luke Haas som har vært på GitHub i årevis, har over 1800 stjerner og fortsatt fungerer der «moderne» løsninger snubler i konflikter med Elementor. Ingen abonnementer, ingen hauger av avhengigheter, én .js-fil og et dusin konfigurasjonslinjer.

💡 Rask oversikt:

• Installere Scrollify: last ned skriptet fra GitHub og koble det til i functions.php
• Sette opp seksjoner i Elementor: CSS-klasse, minimumshøyde og marginer
• Grunnleggende konfigurasjon: gjennomgang av alternativene scrollSpeed, easing, setHeights og touchScroll
• Vertikal navigasjon: integrasjon med Scroll Navigation-widgeten fra JetElements
• Finjustering: erstatte standard sirkler med SVG-ikoner via CSS
• Vanlige problemer: bunnmargin, rulleskjelving, ankerkonflikt og løsningene på dem

Hva Scrollify er og hva som er spesielt med det

Scrollify er et jQuery-programtillegg som tvinger rullingen til å binde seg til seksjonsgrenser. Brukeren snurrer på hjulet, siden beveger seg ikke jevnt, den klikker til neste blokk. Oppførselen minner om å sveipe mellom skjermer i en mobilapp, bare på datamaskin og via musehjul.

Den største fordelen er forutsigbarhet. Du vet nøyaktig hvilken blokk en besøkende vil se etter rulling. Ingen «overskridelser» og halvrullede seksjoner. Programtillegget er optimalisert for berøringsenheter og kan fungere med dynamisk innhold, du kan laste seksjoner via AJAX, Scrollify vil beregne posisjoner på nytt.

Tilgjengelig ut av esken: hash-navigasjon (direktelenker til seksjoner), avbrudd mellom seksjoner for ikke-standard blokker (bunntekst, topptekst), tilbakeringingsfunksjonene before/after/afterRender/afterResize.

Installasjon og grunnleggende konfigurasjon

jQuery 1.7 eller nyere kreves. I 2026 høres dette arkaisk ut, men i praksis henter de fleste WordPress-temaer og programtillegg fortsatt jQuery inn i bunnteksten, det vil ikke oppstå noen konflikt.

Last ned jquery.scrollify.js fra GitHub-repositoriet lukehaas/Scrollify og koble det til i sidens bunntekst via 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
});

Det enkleste oppstartsalternativet er å peke Scrollify mot elementer med en spesifikk CSS-klasse:

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

Den fullstendige listen over konfigurasjonsalternativer ser slik ut:

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

Nøkkelparametere det er verdt å justere umiddelbart: scrollSpeed (animasjonshastighet i millisekunder, standard 1100, for lange landingssider er det bedre å redusere til 600-800), setHeights (autojuster seksjonshøyde til visningsport), updateHash (legger til #section-name i URL-en ved rulling).

Integrere Scrollify med Elementor: tre trinn

For at Scrollify skal fange opp seksjoner bygget i Elementor, må du merke dem riktig. Tilfeldig plasserte blokker uten klasser vil rett og slett ikke bli sett av programtillegget.

Trinn 1: tilordne en CSS-klasse til hver seksjon

Åpne seksjonsredigering i Elementor, gå til fanen «Avansert» og i feltet «CSS-klasse» skriv inn en verdi, for eksempel .scrollify (uten punktum, Elementor legger det til selv). Klassen bør være den samme for alle seksjoner som deltar i bilde-for-bilde-rullingen.

Trinn 2: angi minimumshøyde

Gjennom prøving og feiling ble det funnet: for å unngå rykking ved rulling trenger seksjoner en minimumshøyde på 100vh og marginer nullstilt. På fanen «Layout» angir du:

• Minimumshøyde: 100 VH
• Polstring: 0 på alle sider

Trinn 3: skriv konfigurasjon for nettstedet ditt

Nedenfor er en produksjonskonfigurasjon brukt på reelle prosjekter. Skjermbredde sjekkes slik at på mobile enheter (mindre enn 1000 piksler) forblir rullingen normal, seksjonsrulling på en telefon er mer til hinder enn hjelp:

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

Merk: både .scrollify og .footer sendes til section. Bunnteksten skal ikke delta i bilde-for-bilde-rulling som en full seksjon (den er vanligvis mindre enn 100vh), men Scrollify bør vite om den, det er det standardScrollElements er til for.

Vertikal navigasjon med JetElements Scroll Navigation

Bilde-for-bilde-rulling uten navigasjon er som en bok uten innholdsfortegnelse. For at en besøkende skal kunne hoppe til ønsket seksjon med ett klikk, legger vi til en vertikal meny.

Her kommer JetElements fra Crocoblock inn i bildet, et av de kraftigste settene med tilleggswidgeter for Elementor. Det inkluderer widgeten Scroll Navigation, som tegner et vertikalt panel med punktindikatorer og kobler dem til seksjoner.

Etter at du har installert JetElements, finner du widgeten i panelet og drar den ut på siden. Deretter to gjensidige handlinger.

Først kobler du navigasjonen til seksjoner. I widgetinnstillingene angir du ID-en til den tilsvarende seksjonen for hvert element:

Deretter åpner du hver seksjon i Elementor og skriver den samme ID-en i feltet «CSS ID» under fanen «Avansert»:

Hovedinnstillingen det er best å ikke røre, er bryteren «Bytt seksjoner fullstendig». Hvis blokkinnholdet er fysisk høyere enn brukerens skjerm (for eksempel på en bærbar PC med liten skjerm), vil deler av innholdet bli kuttet av og ikke vist.

De resterende parameterne er intuitivt forståelige. Her er et oppsett som har vist seg i praksis:

Tilpasse navigasjonsmarkører: endre sirkler til ikoner

Standard sirkler i Scroll Navigation er funksjonelle, men kjedelige. Å erstatte dem med SVG-ikoner er en sak for én CSS-blokk.

Nedenfor er en ferdig kodebit. For hver seksjon sin egen data-anchor og sitt eget ikon. Ikoner (SVG) bør lastes opp til WordPress-mediebiblioteket på forhånd og erstatte URL-en:

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
}

For å finne seksjonens data-anchor, åpner du utviklerverktøy i nettleseren (F12), finner navigasjonselementet og ser på attributtverdien.

Animasjonseffekter: easing-bibliotek

Standard easeOutExpo er bare én av dusinvis av utjevningsfunksjoner som er tilgjengelige via jQuery Easing. Se hele katalogen med visualisering av hver kurve på easings.net.

For å koble til laster du ned jquery.easing.1.3.js og kobler den til i footeren på samme måte som Scrollify, nødvendigvis før du kaller $.scrollify(). Etter det kan du i easing-parameteren bruke hvilken som helst funksjon fra katalogen, fra easeInOutCubic og easeOutBounce til easeInOutBack og dusinvis av andre.

Vanlige problemer og løsninger

Gjennom flere års bruk av Scrollify på WordPress-nettsteder har det samlet seg en liste over gjentakende fallgruver. Her er de med ferdige svar.

Problem 1. Etter tilkobling av Scrollify vises den første seksjonen med en bunnmargin på omtrent 20 piksler, selv om padding ikke er satt noe sted. Årsak. Horisontal rulling, skjult via overflow-x: hidden, er teknisk til stede i DOM-en. Scrollify tar ærlig hensyn til høyden i beregningene. Løsning. Legg til CSS-regelen padding-bottom: 20px; på seksjonen.

Problem 2. Rulling fungerer, men siden rister kraftig under rulling. Årsak. Konflikt med en annen jQuery-plugin eller et skript som også manipulerer rulling. Løsning. Deaktiver plugin-er metodisk én etter én, og sjekk rulleoppførselen etter hver deaktivering. Ikke glem å tømme nettleser- og nettstedscache.

Problem 3. Utviklerkonsollen gir feilmelding: Scrollify warning: ID matches hash value, this will cause the page to anchor. Årsak. En plugin setter inn et anker i side-URL-en, noe som gjør at Scrollify ikke kan fastslå riktig posisjon. For eksempel reproduserte situasjonen seg stabilt på kombinasjonen av Zita-tema og Popups-plugin. Løsning. «Nøytraliser» ankeret i jQuery-skript via return false:

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

Problem 4. Scrollify skal bare fungere på hjemmesiden og kun for desktop. Løsning. Pakk kallet inn i en sjekk for body-klasse og vindusbredde:

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

Scrollify i 2026: alternativer og dom

Scrollify er ikke den eneste løsningen for seksjonsbasert rulling. I 2026 har en WordPress-utvikler minst tre alternativer:

CSS-egenskapen scroll-snap-type, native nettleserimplementering uten JavaScript. Fungerer raskt, men animasjonstilpasning er begrenset (ingen easing, kan ikke stille inn hastighet). For enkle landingssider, et utmerket alternativ.

Lenis, en moderne smooth scroll-motor fra Darkroom studio. Binder seg ikke rigid til seksjoner, men skaper en effekt av treghetsglatthet. Integreres med Elementor via egendefinert kode.

Smooth Scroll-widget fra Unlimited Elements for Elementor, en no-code-løsning med visuelle innstillinger for hastighet og bildefrekvens.

Men hvis du trenger nøyaktig bilde-for-bilde, forutsigbar rulling med navigasjon og full kontroll over alle aspekter, forblir Scrollify et fungerende og utprøvd verktøy. 1800 stjerner på GitHub, åpne issues blir lukket, skriptet lever i produksjon på tusenvis av nettsteder.

Se en kort video om oppsett av smooth scroll i Elementor, hele prosessen fra widget-installasjon til sluttresultat vises tydelig:

⁉️🤔 Ofte stilte spørsmål

Er jQuery nødvendig for Scrollify i 2026?

Ja, Scrollify er tett avhengig av jQuery. Hvis nettstedet ditt har kvittet seg helt med jQuery (for eksempel bruker du Bricks eller et egendefinert tema på ren JS), bør du heller se på Lenis eller native scroll-snap-type. Men for et typisk WordPress-nettsted er jQuery nesten helt sikkert allerede lastet av temaet eller en av plugin-ene, det blir ingen ekstra belastning.

Hva er best for Elementor: Scrollify eller innebygde bevegelseseffekter?

Elementors innebygde Motion Effects er ansvarlige for å animere elementer inne i en seksjon (fade, slide), ikke for rulleatferd mellom seksjoner. Dette er forskjellige oppgaver. Scrollify styrer nøyaktig overganger mellom blokker, de kan og bør kombineres.

Fungerer Scrollify med Elementor Flexbox Container?

Ja, det fungerer. Aktiver Flexbox Container i Elementor-innstillingene, tilordne CSS-klasse til seksjoner via containerens «Avansert»-fane, mekanikken er den samme som med klassiske seksjoner.

Hvorfor sluttet Scrollify å fungere etter oppdatering av Elementor?

Mest sannsynlig ble seksjonens CSS-klasse eller ID tilbakestilt. Elementor tilbakestiller noen ganger egendefinerte attributter ved større oppdateringer. Sjekk at «CSS-klasse»-feltet i hver seksjon fortsatt inneholder .scrollify, og at ID-er samsvarer med de som er skrevet i Scroll Navigation.

Kan Scrollify brukes på et nettsted uten WordPress?

Ja, Scrollify er ikke knyttet til WordPress eller Elementor. Koble til jQuery og jquery.scrollify.js, merk opp HTML-seksjoner med nødvendig klasse og kall $.scrollify(), alt vil fungere på ethvert nettsted, fra ren HTML til React (med forbehold om jQuery-avhengighet).

Scrollify eller alternativ: hva du skal bruke til en spesifikk oppgave

Valget koker ned til tre scenarioer. Hvis du har en klassisk landingsside på Elementor med 5-8 seksjoner og vertikal navigasjon, gir Scrollify + JetElements Scroll Navigation et ferdig resultat på en time. Hvis du starter et nytt prosjekt uten jQuery og ønsker minimale avhengigheter, vil scroll-snap-type på CSS løse oppgaven med et par linjer. Hvis du trenger glatthet uten rigid binding til seksjoner, bruk Lenis.

Det viktigste praksis har vist: Scrollify svikter deg ikke der «trendy» løsninger faller på grunn av konflikter med det tunge økosystemet av WordPress-plugins. Noen ganger er stabilitet viktigere enn nyhet.