Fullskärmsrullning i ren CSS är en plåga. scroll-snap beter sig olika i Chrome och Safari, det hackar på mobil, och du kan glömma webbläsarhistorik och URL-ankare. jQuery-lösningar kräver 200+ rader kod och fallerar ändå vid varierande skärmhöjder.

fullPage.js hanterar den här uppgiften fullständigt. Ett bibliotek med över 35 000 stjärnor på sitt GitHub-repo och 2,5 miljoner månatliga nedladdningar via jsDelivr CDN ger förutsägbar sektionsvis rullning, horisontella slides, lazy loading och 80+ alternativ direkt ur kartongen. Version 4.0.41 (mars 2026) körs på Vanilla JS, och jQuery krävs inte längre.

Här är en steg-för-steg-guide för att integrera fullPage.js i WordPress: från inladdning via wp_enqueue_script till videobakgrund och selektiv inaktivering av stilar. Inga plugins, med full kontroll över varje pixel.

💡 Snabb översikt:

• Ladda fullPage.js via wp_enqueue_script, en hook, inga extra plugins
• Konfigurera sektioner, ankare och navigering så att de matchar sidstrukturen
• Lägg till en videobakgrund som pausar automatiskt när du lämnar sektionen
• Lös problemet med långa block med scrollOverflow och fp-auto-height
• Inaktivera bibliotekets stilar selektivt, utan att slita ut det helt

Vad fullPage.js är

fullPage.js är ett JavaScript-bibliotek för sajter med fullskärms vertikal rullning. Sidan delas upp i sektioner, där var och en tar exakt skärmens höjd. En skrollning eller en beröring flyttar användaren mellan sektionerna med en mjuk animation. Inuti sektionerna finns horisontella slides.

Den aktuella versionen är 4.0.41 (mars 2026). Biblioteket har skrivits om helt i Vanilla JS: att ta bort jQuery sparade cirka 80 KB. Alla moderna webbläsare och mobila enheter stöds. IE11 fungerar med version 3.x.

För WordPress finns officiella plugins för Elementor, Gutenberg och Divi. Pluginsen är betalda, men de bygger en landningssida visuellt, utan kod. Om du behöver full kontroll laddar du in biblioteket i temat manuellt.

Steg 1. Koppla fullPage.js till WordPress

Det korrekta sättet är via wp_enqueue_script i functions.php. Ingen hårdkodad <script> i sidfoten, inga insättningar via wp_head.

Ladda ner fullpage.min.js och fullpage.min.css från det officiella repot eller ladda dem via ett CDN. För produktion är en lokal fil mer tillförlitlig, färre externa beroenden och snabbare laddning.

Lägg filerna i en temamapp, till exempel /assets/fullpage/, och lägg till detta i functions.php:

1
/**
2
 * Loading fullPage.js only on the front page.
3
 */
4
function sd_register_fullpage() {
5
    if ( ! is_front_page() ) {
6
        return;
7
    }
8
 
9
    wp_enqueue_style(
10
        'sd-fullpage',
11
        get_template_directory_uri() . '/assets/fullpage/fullpage.min.css',
12
        array(),
13
        '4.0.41'
14
    );
15
 
16
    wp_enqueue_script(
17
        'sd-fullpage',
18
        get_template_directory_uri() . '/assets/fullpage/fullpage.min.js',
19
        array(),
20
        '4.0.41',
21
        true
22
    );
23
}
24
add_action( 'wp_enqueue_scripts', 'sd_register_fullpage' );

Vad som spelar roll här: is_front_page() begränsar inläsningen till enbart startsidan, så att biblioteket inte ligger på hela webbplatsen. Den fjärde parametern true placerar skriptet i sidfoten, och sidan renderas utan fördröjning. Versionen i det tredje argumentet hjälper till att nollställa cachen vid uppdatering, så att webbläsaren hämtar den nya filen istället för den cachade gamla.

Om ett CDN är smidigare, ersätt get_template_directory_uri() med direktlänkar från jsDelivr-nätverket eller cdnjs. Fäst versionen i URL:en explicit ([email protected]), använd inte @latest, en större versionsuppdatering kan bryta webbplatsen utan förvarning.

Steg 2. Grundläggande konfiguration

HTML-strukturen är enkel: en wrapper med id="fullpage" och sektioner med klassen section. Inuti sektioner finns horisontella slides med klassen slide.

1
<div id="fullpage">
2
    <div class="section">First section</div>
3
    <div class="section">Second section</div>
4
    <div class="section">
5
        <div class="slide">Slide 1</div>
6
        <div class="slide">Slide 2</div>
7
    </div>
8
</div>

Initieringen sker i Vanilla JS, i filen fullpage-init.js, som laddas efter biblioteket:

1
document.addEventListener('DOMContentLoaded', function () {
2
    new fullpage('#fullpage', {
3
        // Navigation
4
        anchors: ['intro', 'features', 'pricing', 'contact'],
5
        navigation: true,
6
        navigationPosition: 'right',
7
 
8
        // Scrolling
9
        scrollingSpeed: 700,
10
        autoScrolling: true,
11
        fitToSection: true,
12
        scrollBar: false,
13
        easing: 'easeInOutCubic',
14
 
15
        // Responsive
16
        responsiveWidth: 1024,
17
        responsiveHeight: 768,
18
 
19
        // Design
20
        verticalCentered: true,
21
        sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f5f5f5'],
22
        paddingTop: '2em',
23
 
24
        // Performance
25
        lazyLoading: true,
26
        observer: true
27
    });
28
});

De viktigaste alternativen som är värda att konfigurera medvetet från första körningen:

• anchors, ankare för direktlänkar till sektioner (site.com/#features). Utan dem ändras inte URL:en vid skrollning, och du kan inte länka till ett specifikt block.
• navigation, punkter till höger. Användaren ser omedelbart hur många sektioner det finns och var de befinner sig.
• scrollingSpeed, animeringshastighet i ms. 700 är den gyllene medelvägen: inte ryckig och inte utdragen.
• responsiveWidth och responsiveHeight, på skärmar mindre än de inställda storlekarna stängs helskärmsskrollning av automatiskt. Annars klipps innehåll bort på surfplattor och mobiler.
• scrollBar, skrollningslisten. false för en ren helskärmseffekt; true är praktiskt vid felsökning.

Den fullständiga listan med 80+ alternativ finns i den officiella dokumentationen.

Steg 3. Vertikal navigering

De inbyggda navigeringspunkterna aktiveras av flaggan navigation: true. Men standardutseendet är minimalt, grå cirklar till höger. Vi anpassar dem till designen med CSS:

1
/* Color and size of the navigation dots */
2
#fp-nav ul li a span {
3
    background: #4b944e;
4
    width: 10px;
5
    height: 10px;
6
    margin: -5px 0 0 -5px;
7
}
8
 
9
#fp-nav ul li a.active span {
10
    background: #fff;
11
    border: 2px solid #4b944e;
12
}
13
 
14
/* Tooltips on hover */
15
#fp-nav ul li .fp-tooltip {
16
    color: #333;
17
    font-size: 14px;
18
    font-family: inherit;
19
}

Om den inbyggda navigeringen krockar med temat eller inte renderas, skriver vi en manuell bindning med jQuery. Skriptet nedan spårar den aktiva klassen på sektionerna och markerar motsvarande menyalternativ:

1
jQuery(document).ready(function ($) {
2
    $(window).scroll(function () {
3
        if ($(window).scrollTop() <= 1) return;
4
 
5
        var sections = [
6
            'fullPage-1', 'fullPage-2', 'fullPage-3', 'fullPage-4',
7
            'fullPage-5', 'fullPage-6', 'fullPage-7', 'fullPage-8',
8
            'fullPage-9', 'fullPage-10'
9
        ];
10
 
11
        sections.forEach(function (cls, i) {
12
            var isActive = $('.' + cls).hasClass('active');
13
            var navItem = $('#fp-nav > ul > li:nth-child(' + (i + 1) + ') > a');
14
 
15
            if (isActive) {
16
                navItem.addClass('active');
17
                navItem.find('span').css('background', '#fff');
18
            } else {
19
                navItem.removeClass('active');
20
                navItem.find('span').css('background', '#4b944e');
21
            }
22
        });
23
    });
24
});

Själva navigeringspanelen, en oordnad lista med länkar till ankarna:

1
<ul id="fp-nav">
2
    <li><a href="#intro" class="active"></a></li>
3
    <li><a href="#features"></a></li>
4
    <li><a href="#pricing"></a></li>
5
    <li><a href="#contact"></a></li>
6
</ul>

I praktiken räddar denna fallback dig när temat skriver över fullPage.js-selektorer eller använder en icke-standardiserad DOM-struktur. Koden placeras i footer.php eller via wp_add_inline_script.

Steg 4. Videobakgrund och uppspelningskontroll

En video bakom den första sektionen är en slående detalj. Men utan kontroll fortsätter den spela efter att du lämnat sektionen och slösar resurser. Det löses med afterLoad-callbacken.

HTML för den första sektionen med video:

1
<div class="section" id="intro">
2
    <video id="bgVideo" loop muted playsinline data-autoplay>
3
        <source src="/wp-content/uploads/video/background.mp4" type="video/mp4">
4
    </video>
5
    <div class="layer">
6
        <h1>Heading over the video background</h1>
7
    </div>
8
</div>

Attributet playsinline är obligatoriskt för iOS, utan det öppnar Safari videon i en helskärmsspelare. Kombinationen loop muted data-autoplay ger sömlös bakgrundsuppspelning.

Kontroll via afterLoad i fullPage.js-konfigurationen:

1
new fullpage('#fullpage', {
2
    // ...other options...
3
    afterLoad: function (anchorLink, index) {
4
        var video = document.querySelector('#bgVideo');
5
        if (!video) return;
6
 
7
        if (index === 1) {
8
            video.play();
9
        } else {
10
            video.pause();
11
        }
12
    }
13
});

Callbacken aktiveras när du går in i en sektion. Index 1, den första sektionen, startar videon. Alla andra pausar. Processorn och batteriet på mobilen slösas inte bort.

För manuell kontroll lägger du till en Spela/Pausa-knapp, hanteraren växlar ikonen och anropar video.play() / video.pause(). Användaren får ett val, och helskärmsrullningen fungerar fortfarande.

Steg 5. Långa block, scrollOverflow och automatisk höjd

När en sektions innehåll inte ryms på skärmhöjden kapas nederdelen. Vi aktiverar scrollOverflow:

1
new fullpage('#fullpage', {
2
    scrollOverflow: true
3
});

Alternativet lägger till en inre rullningslist i just den sektionen, de andra sektionerna påverkas inte. Detta räcker i de flesta fall.

För finare kontroll lägger vi CSS-klasser direkt på sektionen:

1
<div class="section fp-normal-scroll fp-auto-height">
2
    <!-- Long content with free scrolling -->
3
</div>

fp-auto-height tar bort begränsningen "exakt 100vh", sektionshöjden bestäms av innehållet. fp-normal-scroll inaktiverar snäppeffekten, sektionen rullar naturligt. Kombinationen är idealisk för sidfötter, långa tabeller och sidor med varierande blockhöjder.

I blockredigerare som King Composer läggs klasserna till i radinställningarna:

Steg 6. Inaktivera fullPage.js-stilar selektivt

Ibland åsidosätter biblioteket webbplatsens CSS, förskjuter positionering, ändrar padding, sektionsbredder. Det finns ingen anledning att slita ut fullPage.js helt: vi inaktiverar bara de problematiska stilarna.

Ett exempel på att återställa positionering för sektionerna 3 till 8:

1
/* Reset of fullPage.js styles for the selected sections */
2
.fullpage-wrapper section:nth-child(n+3):nth-child(-n+8) {
3
    left: inherit !important;
4
    padding-left: inherit !important;
5
    width: inherit !important;
6
    height: inherit !important;
7
    padding-top: inherit !important;
8
    padding-bottom: inherit !important;
9
    background-color: inherit !important;
10
}

Selektorn :nth-child(n+3):nth-child(-n+8) träffar exakt intervallet. !important är motiverat här, fullPage.js sätter stilar inline, och du kan bara åsidosätta dem på detta sätt. Men tillämpa det selektivt: en !important över hela sidan, och kaskaden förvandlas till gröt.

Färdiga WordPress-teman med fullPage.js

Om du inte vill integrera biblioteket manuellt i ett befintligt tema, ta ett färdigt starter-tema. Aktuella starter-teman på GitHub:

• starter-fullpagejs, en minimal starter, en bra utgångspunkt för egen markup
• wordpress-onepager, ett lättviktstema för sajter på en sida (arkivet är inte tillgängligt, leta efter forks)
• derkodde_fullpagetheme, ett tema med stöd för sektioner och slides (arkivet borttaget, använd det som koncept)
• MyPortfolio, en portfölj byggd på fullPage.js
• dandelion, ett tema för en sida med en ren design

Alla teman ligger under GPL och behöver anpassas till ett specifikt projekt. Men de ger dig en färdig sektionsstruktur och grundläggande fullPage.js-integration, vilket sparar en halv dags arbete.

Det finns också ett officiellt WordPress-tema från utvecklaren och tilläggen för Elementor, Gutenberg och Divi som nämns ovan. Tilläggen är betalda, men de täcker 95% av uppgifterna utan en enda rad kod.

En kort video om att installera och konfigurera fullPage.js i WordPress, den visar tydligt integrationsprocessen via det officiella tillägget för Divi.

⁉️🤔 Vanliga frågor

Är fullPage.js gratis?

Ja, för projekt med öppen källkod under licensen GPLv3 är det helt gratis. För stängda kommersiella sajter behöver du en kommersiell licens. WordPress-tilläggen för Elementor, Gutenberg och Divi är separata betalprodukter, från $29 per sajt.

På vilket sätt är fullPage.js bättre än CSS Scroll Snap?

CSS Scroll Snap beter sig olika i olika webbläsare: mjukt i Safari, ryckigt i Chrome, fördröjt på mobilen. fullPage.js ger samma beteende överallt. Plus direkt ur lådan: URL-ankare, webbläsarhistorik, horisontella slides, inre skrollning i sektioner och 37 animeringsalternativ. Inga polyfills och inga manuella kryckor.

Hur stänger man av fullPage.js på mobilen?

Alternativen responsiveWidth: 1024 och responsiveHeight: 768 i konfigurationen. När skärmbredden är under 1024px eller höjden under 768px, stänger biblioteket automatiskt av snap-skrollning och återgår till normal skrollning. Inga extra userAgent-kontroller behövs.

Kan man använda fullPage.js med WooCommerce?

Ja, men försiktigt. Produkt- och kundvagnssidor ska inte vara helskärm, det förstör shopping-ux:en. Koppla fullPage.js endast till startsidan eller specifika landningssidor via WordPress villkors-taggar: is_front_page() eller is_page('landing').

Varför spelas inte bakgrundsvideon upp på iOS?

Safari på iPhone och iPad kräver attributet playsinline på <video>-taggen. Utan det går videon in i en helskärmsspelare och fungerar inte som bakgrund. Se också till att videon är kodad i H.264 (MP4), HEVC stöds inte på alla Apple-enheter.

FullPage.js 2026: manuell konfiguration eller ett tillägg

Om du bygger en landningssida, en portfölj eller en presentationssajt, levererar fullPage.js en visuell effekt som ren CSS inte kan uppnå. 35 000+ stjärnor på GitHub och 2,5 miljoner installationer i månaden bekräftar att biblioteket lever och är stabilt.

För webbutiker, bloggar och adminpaneler är det inte värt det. Helskärmskrollning står i vägen för navigering och innehållskonsumtion, användaren tröttnar efter 3 till 4 svep.

Att välja väg: om du behöver full kontroll över varje sektion och är redo att skriva kod, gå på manuell inladdning via wp_enqueue_script. Om du vill bygga en landningssida visuellt i Elementor eller Gutenberg på en timme, ta det officiella tillägget. Båda tillvägagångssätten är beprövade i praktiken, båda fungerar utan överraskningar.

Har du testat fullPage.js i dina egna projekt? Dela din erfarenhet i kommentarerna, så bygger vi en levande lista med lösningar på vanliga integrationsproblem.