När en besökare landar på en sida byggd i Elementor och möts av ryckig scrollning med hopp mellan sektioner, sjunker förtroendet för sajten snabbare än scrollen når sidfoten. Särskilt om sidan är tung: bakgrundsvideo, parallaxeffekter, ett dussin sektioner med animationer. Webbläsarens standardscroll kan inte låsa sig mjukt mot blockgränser, den glider bara förbi dem.

Du kan lägga timmar på att välja caching-plugins, minifiering och workarounds. Eller så kan du lägga till ett lättviktigt skript som förvandlar hackiga övergångar till mjuka sektionsbyten, som på påkostade landningssidor.

Vi pratar om Scrollify, ett jQuery-plugin av Luke Haas som har funnits på GitHub i åratal, har 1800+ stjärnor och fortfarande fungerar där "moderna" lösningar snubblar på konflikter med Elementor. Inga prenumerationer, inga ton av beroenden, en .js-fil och ett dussin konfigurationsrader.

💡 Snabb översikt:

• Installera Scrollify: ladda ner skriptet från GitHub och koppla in det i functions.php
• Konfigurera sektioner i Elementor: CSS-klass, minimihöjd och marginaler
• Grundläggande konfiguration: genomgång av alternativen scrollSpeed, easing, setHeights och touchScroll
• Vertikal navigering: integration med Scroll Navigation-widgeten från JetElements
• Finjustering: ersätt standardcirklar med SVG-ikoner via CSS
• Vanliga problem: bottenmarginal, scrollskakning, ankarkonflikt och deras lösningar

Vad är Scrollify och vad är speciellt med det

Scrollify är ett jQuery-plugin som tvingar scrollen att låsa sig mot sektionsgränser. Användaren snurrar på hjulet, sidan rör sig inte mjukt, den snäpper till nästa block. Beteendet påminner om att svepa mellan skärmar i en mobilapp, fast på desktop och via mushjul.

Den främsta fördelen är förutsägbarhet. Du vet exakt vilket block en besökare kommer att se efter scrollning. Inga "överskjutningar" och halvt scrollade sektioner. Pluginet är optimerat för pekenheter och kan arbeta med dynamiskt innehåll, du kan ladda sektioner via AJAX, Scrollify räknar om positionerna.

Tillgängligt direkt ur lådan: hash-navigering (direktlänkar till sektioner), avbrott mellan sektioner för icke-standardblock (sidfot, sidhuvud), callback-funktioner before/after/afterRender/afterResize.

Installation och grundläggande konfiguration

jQuery 1.7 eller nyare krävs. 2026 låter detta ålderdomligt, men i praktiken drar de flesta WordPress-teman och plugins fortfarande in jQuery i sidfoten, det blir ingen konflikt.

Ladda ner jquery.scrollify.js från GitHub-repot lukehaas/Scrollify och koppla in det i sidfoten 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 enklaste startalternativet är att peka Scrollify mot element med en specifik CSS-klass:

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

Den fullständiga listan med konfigurationsalternativ ser ut så här:

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

Nyckelparametrar som är värda att justera direkt: scrollSpeed (animationshastighet i millisekunder, standard 1100, för långa landningssidor är det bättre att minska till 600-800), setHeights (autojustera sektionshöjd till viewport), updateHash (lägger till #section-name i URL:en vid scrollning).

Integrera Scrollify med Elementor: tre steg

För att Scrollify ska fånga upp sektioner byggda i Elementor måste du märka upp dem korrekt. Slumpmässigt placerade block utan klasser kommer helt enkelt inte att ses av pluginet.

Steg 1: tilldela en CSS-klass till varje sektion

Öppna sektionsredigering i Elementor, gå till fliken "Avancerat" och i fältet "CSS-klass" ange ett värde, till exempel .scrollify (utan punkten, Elementor lägger till den själv). Klassen ska vara densamma för alla sektioner som deltar i bildrute-scrollningen.

Steg 2: ställ in minimihöjd

Genom trial and error har det visat sig: för att undvika ryck vid scrollning behöver sektioner en minimihöjd på 100vh och nollställda marginaler. På fliken "Layout" ställer du in:

• Minimihöjd: 100 VH
• Padding: 0 på alla sidor

Steg 3: skriv konfiguration för din sajt

Nedan finns en produktionskonfig som används på riktiga projekt. Skärmbredd kontrolleras så att scrollningen på mobila enheter (mindre än 1000px) förblir normal, sektionsscrollning på en telefon är mer till hinder än hjälp:

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

Obs: både .scrollify och .footer skickas till section. Footern ska inte delta i sektionsvis rullning som en full sektion (den är oftast lägre än 100vh), men Scrollify behöver känna till den, det är vad standardScrollElements är till för.

Vertikal navigering med JetElements Scroll Navigation

Sektionsvis rullning utan navigering är som en bok utan innehållsförteckning. För att besökaren ska kunna hoppa direkt till önskad sektion med ett klick lägger vi till en vertikal meny.

Här kommer JetElements från Crocoblock in i bilden, en av de mest kraftfulla uppsättningarna tilläggswidgets för Elementor. Den innehåller widgeten Scroll Navigation, som ritar en vertikal panel med punktindikatorer och länkar dem till sektioner.

När du har installerat JetElements hittar du widgeten i panelen och drar ut den på sidan. Därefter två ömsesidiga åtgärder.

Först, länka navigeringen till sektionerna. I widgetens inställningar anger du ID:t för motsvarande sektion för varje post:

Öppna sedan varje sektion i Elementor och skriv samma ID i fältet "CSS ID" under fliken "Avancerat":

Den viktigaste inställningen som du helst inte ska röra är reglaget "Växla sektioner helt". Om blockinnehållet fysiskt är högre än användarens skärm (till exempel på en laptop med liten skärm) kommer en del av innehållet att klippas bort och inte visas.

Resterande parametrar är intuitivt tydliga. Här är en uppsättning som har visat sig fungera i praktiken:

Anpassa navigeringsmarkörer: byta cirklar mot ikoner

Standardcirklarna i Scroll Navigation är funktionella men tråkiga. Att ersätta dem med SVG-ikoner är en fråga om ett CSS-block.

Här är ett färdigt kodsnutt. För varje sektion en egen data-anchor och en egen ikon. Ikoner (SVG) ska laddas upp i WordPress mediebibliotek i förväg och ersätta 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
}

För att hitta din sektions data-anchor, öppna utvecklarverktygen i webbläsaren (F12), leta reda på navigeringselementet och titta på attributets värde.

Animationseffekter: easing-bibliotek

Standard easeOutExpo är bara en av dussintals utjämningsfunktioner som finns tillgängliga via jQuery Easing. Se hela katalogen med visualisering av varje kurva på easings.net.

För att ansluta laddar du ner jquery.easing.1.3.js och lägger in den i sidfoten på samma sätt som Scrollify, nödvändigtvis innan du anropar $.scrollify(). Därefter kan du i parametern easing använda vilken funktion som helst från katalogen, från easeInOutCubic och easeOutBounce till easeInOutBack och dussintals andra.

Vanliga problem och deras lösningar

Under flera års användning av Scrollify på WordPress-sajter har en lista med återkommande fallgropar vuxit fram. Här är de med färdiga svar.

Problem 1. Efter att Scrollify kopplats in visas den första sektionen med en bottenmarginal på cirka 20 pixlar, trots att padding inte är satt någonstans. Orsak. Horisontell scroll, dold via overflow-x: hidden, finns tekniskt sett kvar i DOM:en. Scrollify tar ärligt med dess höjd i beräkningarna. Lösning. Lägg till CSS-regeln padding-bottom: 20px; på sektionen.

Problem 2. Scroll fungerar men sidan skakar kraftigt vid scrollning. Orsak. Konflikt med ett annat jQuery-plugin eller skript som också manipulerar scroll. Lösning. Inaktivera plugins metodiskt ett i taget och kontrollera scroll-beteendet efter varje inaktivering. Glöm inte att rensa webbläsarens och sajtens cache.

Problem 3. Utvecklarkonsolen ger felet: Scrollify warning: ID matches hash value, this will cause the page to anchor. Orsak. Något plugin infogar ett ankare i sidans URL, vilket gör att Scrollify inte kan fastställa den aktuella positionen korrekt. Exempelvis på kombinationen Zita-tema och Popups-plugin återskapades situationen stabilt. Lösning. "Neutralisera" ankaret 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 ska bara fungera på startsidan och endast för desktop. Lösning. Slå in anropet i en kontroll av body-klass och fönsterbredd:

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

Scrollify 2026: alternativ och utlåtande

Scrollify är inte den enda lösningen för sektionsbaserad scrollning. År 2026 har en WordPress-utvecklare minst tre alternativ:

CSS-egenskapen scroll-snap-type, inbyggd webbläsarimplementation utan JavaScript. Fungerar snabbt, men animationsanpassningen är begränsad (ingen easing, kan inte ställa in hastighet). För enkla landningssidor ett utmärkt alternativ.

Lenis, en modern smooth scroll-motor från Darkroom studio. Binder inte till sektioner strikt, men skapar en effekt av trög mjukhet. Integreras med Elementor via anpassad kod.

Smooth Scroll-widget från Unlimited Elements för Elementor, en no-code-lösning med visuella inställningar för hastighet och bildfrekvens.

Men om du behöver exakt bildrutevis, förutsägbar scrollning med navigering och full kontroll över varje aspekt, förblir Scrollify ett fungerande och beprövat verktyg. 1800 stjärnor på GitHub, öppna ärenden stängs, skriptet lever i produktion på tusentals sajter.

Se en kort video om hur du ställer in mjuk scroll i Elementor, hela processen från widget-installation till slutresultat visas tydligt:

⁉️🤔 Vanliga frågor

Krävs jQuery för Scrollify 2026?

Ja, Scrollify är starkt beroende av jQuery. Om din sajt helt har gjort sig av med jQuery (till exempel om du använder Bricks eller ett anpassat tema på ren JS), titta hellre på Lenis eller native scroll-snap-type. Men för en typisk WordPress-sajt är jQuery nästan säkert redan inläst av temat eller ett av pluginen, det blir ingen extra belastning.

Vad är bättre för Elementor: Scrollify eller inbyggda rörelseeffekter?

Elementors inbyggda Motion Effects ansvarar för att animera element inuti en sektion (tona, glida), inte för scroll-beteende mellan sektioner. Det är olika uppgifter. Scrollify styr just övergångar mellan block, de kan och bör kombineras.

Fungerar Scrollify med Elementor Flexbox Container?

Ja, det fungerar. Aktivera Flexbox Container i Elementors inställningar, tilldela CSS-klass till sektioner via containerns flik "Avancerat", mekaniken är densamma som med klassiska sektioner.

Varför slutade Scrollify fungera efter uppdatering av Elementor?

Troligtvis har sektionens CSS-klass eller ID nollställts. Elementor återställer ibland anpassade attribut vid större uppdateringar. Kontrollera att fältet "CSS-klass" i varje sektion fortfarande innehåller .scrollify, och att ID:n matchar de som skrivits i Scroll Navigation.

Kan Scrollify användas på en sajt utan WordPress?

Ja, Scrollify är inte bundet till WordPress eller Elementor. Koppla in jQuery och jquery.scrollify.js, märk upp HTML-sektioner med den nödvändiga klassen och anropa $.scrollify(), allt fungerar på vilken sajt som helst, från ren HTML till React (med reservation för jQuery-beroendet).

Scrollify eller alternativ: vad ska man använda för en specifik uppgift

Valet kokar ner till tre scenarier. Om du har en klassisk landningssida i Elementor med 5-8 sektioner och vertikal navigering, ger Scrollify + JetElements Scroll Navigation ett färdigt resultat på en timme. Om du startar ett nytt projekt utan jQuery och vill ha minimala beroenden, löser scroll-snap-type i CSS uppgiften med ett par rader. Om du behöver mjukhet utan stel bindning till sektioner, använd Lenis.

Det viktigaste som praktiken har visat: Scrollify sviker dig inte där "trendiga" lösningar faller på grund av konflikter med det tunga ekosystemet av WordPress-plugins. Ibland är stabilitet viktigare än nymodighet.