Quando un visitatore arriva su una pagina costruita con Elementor e vede uno scroll a scatti con salti tra le sezioni, la fiducia nel sito cala più in fretta di quanto lo scroll raggiunga il footer. Soprattutto se la pagina è pesante: video di sfondo, effetti parallasse, una dozzina di sezioni con animazioni. Lo scroll standard del browser non riesce ad agganciarsi in modo fluido ai confini dei blocchi, ci scivola semplicemente oltre.

Potete passare ore a selezionare plugin di caching, minificazione e soluzioni alternative. Oppure potete aggiungere uno script leggero che trasforma le transizioni brusche in uno scorrimento fluido tra le sezioni, come sulle landing page di alto livello.

Parliamo di Scrollify, un plugin jQuery di Luke Haas che è su GitHub da anni, ha oltre 1800 stelle e funziona ancora dove le soluzioni "moderne" si inceppano nei conflitti con Elementor. Nessun abbonamento, nessuna tonnellata di dipendenze, un file .js e una dozzina di righe di configurazione.

💡 Panoramica rapida:

• Installazione di Scrollify: scaricare lo script da GitHub e collegarlo in functions.php
• Impostazione delle sezioni in Elementor: classe CSS, altezza minima e margini
• Configurazione di base: analisi delle opzioni scrollSpeed, easing, setHeights e touchScroll
• Navigazione verticale: integrazione con il widget Scroll Navigation di JetElements
• Personalizzazione avanzata: sostituzione dei cerchi standard con icone SVG tramite CSS
• Problemi comuni: margine inferiore, tremolio dello scroll, conflitto di ancore e relative soluzioni

Cos'è Scrollify e cosa ha di speciale

Scrollify è un plugin jQuery che vincola forzatamente lo scroll ai confini delle sezioni. L'utente gira la rotella, la pagina non si muove in modo fluido, scatta al blocco successivo. Il comportamento ricorda lo scorrimento tra le schermate in un'app mobile, solo su desktop e tramite rotella del mouse.

Il vantaggio principale è la prevedibilità. Sapete esattamente quale blocco vedrà un visitatore dopo lo scroll. Nessun "fuorigiri" e sezioni visualizzate a metà. Il plugin è ottimizzato per i dispositivi touch e può funzionare con contenuti dinamici, potete caricare sezioni via AJAX, Scrollify ricalcolerà le posizioni.

Disponibili out of the box: navigazione tramite hash (link diretti alle sezioni), interruzione tra le sezioni per blocchi non standard (footer, header), funzioni di callback before/after/afterRender/afterResize.

Installazione e configurazione di base

È richiesto jQuery 1.7 o superiore. Nel 2026 questo suona arcaico, ma in pratica la maggior parte dei temi e plugin WordPress caricano ancora jQuery nel footer, non ci saranno conflitti.

Scaricate jquery.scrollify.js dal repository GitHub lukehaas/Scrollify e collegatelo nel footer del sito tramite 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
});

L'opzione di avvio più semplice è puntare Scrollify agli elementi con una specifica classe CSS:

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

L'elenco completo delle opzioni di configurazione si presenta così:

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

Parametri chiave che conviene regolare subito: scrollSpeed (velocità dell'animazione in millisecondi, default 1100, per landing page lunghe meglio ridurre a 600-800), setHeights (adatta automaticamente l'altezza della sezione al viewport), updateHash (aggiunge #section-name all'URL durante lo scroll).

Integrare Scrollify con Elementor: tre passaggi

Perché Scrollify rilevi le sezioni costruite in Elementor, dovete contrassegnarle correttamente. Blocchi posizionati a caso senza classi semplicemente non saranno visti dal plugin.

Passaggio 1: assegnare una classe CSS a ogni sezione

Aprite la modifica della sezione in Elementor, andate alla scheda "Avanzate" e nel campo "Classe CSS" inserite un valore, ad esempio, .scrollify (senza il punto, Elementor lo aggiunge da sé). La classe deve essere la stessa per tutte le sezioni che partecipano allo scorrimento a fotogrammi.

Passaggio 2: impostare l'altezza minima

Per tentativi ed errori si è scoperto che: per evitare scatti durante lo scroll, le sezioni necessitano di un'altezza minima di 100vh e margini azzerati. Nella scheda "Layout" impostate:

• Altezza minima: 100 VH
• Padding: 0 su tutti i lati

Passaggio 3: scrivere la configurazione per il vostro sito

Di seguito una configurazione di produzione usata su progetti reali. Viene verificata la larghezza dello schermo in modo che sui dispositivi mobili (meno di 1000px) lo scroll rimanga normale, lo scorrimento a sezioni su telefono è più un intralcio che un aiuto:

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

Nota: sia .scrollify che .footer vengono passati a section. Il footer non deve partecipare allo scorrimento frame-by-frame come sezione intera (di solito è alto meno di 100vh), ma Scrollify deve conoscerlo: ecco a cosa serve standardScrollElements.

Navigazione verticale con JetElements Scroll Navigation

Lo scorrimento frame-by-frame senza navigazione è come un libro senza indice. Per permettere al visitatore di saltare con un clic alla sezione desiderata, aggiungiamo un menu verticale.

Qui entra in scena JetElements di Crocoblock, uno dei set più potenti di widget aggiuntivi per Elementor. Include il widget Scroll Navigation, che disegna un pannello verticale con indicatori a punti e li collega alle sezioni.

Dopo aver installato JetElements, trova il widget nel pannello e trascinalo sulla pagina. Poi, due azioni reciproche.

Primo, collega la navigazione alle sezioni. Nelle impostazioni del widget, per ogni voce specifica l'ID della sezione corrispondente:

Poi apri ogni sezione in Elementor e scrivi lo stesso ID nel campo "CSS ID" della scheda "Avanzate":

L'impostazione principale che è meglio non toccare è l'interruttore "Switch sections completely". Se il contenuto del blocco è fisicamente più alto dello schermo dell'utente (per esempio su un portatile con display piccolo), parte del contenuto verrà tagliata e non mostrata.

I parametri rimanenti sono intuitivi. Ecco un set collaudato nella pratica:

Personalizzare gli indicatori di navigazione: da cerchi a icone

I cerchi standard di Scroll Navigation sono funzionali ma noiosi. Sostituirli con icone SVG è questione di un blocco CSS.

Di seguito trovi uno snippet già pronto. Per ogni sezione il suo data-anchor e la sua icona. Le icone (SVG) vanno caricate in anticipo nella libreria media di WordPress e va sostituito l'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
}

Per trovare il data-anchor della tua sezione, apri gli strumenti di sviluppo nel browser (F12), individua l'elemento di navigazione e guarda il valore dell'attributo.

Effetti di animazione: libreria di easing

La funzione standard easeOutExpo è solo una delle decine di funzioni di smoothing disponibili tramite jQuery Easing. Consulta il catalogo completo con la visualizzazione di ogni curva su easings.net.

Per collegarla scarica jquery.easing.1.3.js e collegalo nel footer in modo analogo a Scrollify, necessariamente prima di chiamare $.scrollify(). Fatto questo, nel parametro easing puoi usare qualsiasi funzione del catalogo, da easeInOutCubic e easeOutBounce a easeInOutBack e decine di altre.

Problemi comuni e relative soluzioni

In diversi anni di utilizzo di Scrollify su siti WordPress si è accumulata una lista di insidie ricorrenti. Eccole con le risposte pronte.

Problema 1. Dopo aver collegato Scrollify, la prima sezione viene visualizzata con un margine inferiore di circa 20 pixel, anche se il padding non è impostato da nessuna parte. Causa. Lo scroll orizzontale, nascosto tramite overflow-x: hidden, è tecnicamente presente nel DOM. Scrollify onestamente tiene conto della sua altezza nei calcoli. Soluzione. Aggiungere la regola CSS padding-bottom: 20px; alla sezione.

Problema 2. Lo scroll funziona ma la pagina trema pesantemente durante lo scorrimento. Causa. Conflitto con un altro plugin jQuery o script che manipola anch'esso lo scroll. Soluzione. Disabilitare metodicamente i plugin uno per uno, verificando il comportamento dello scroll dopo ogni disabilitazione. Non dimenticare di svuotare la cache del browser e del sito.

Problema 3. La console sviluppatore restituisce l'errore: Scrollify warning: ID matches hash value, this will cause the page to anchor. Causa. Qualche plugin inserisce un'ancora nell'URL della pagina, a causa della quale Scrollify non riesce a determinare correttamente la posizione corrente. Ad esempio, sulla combinazione del tema Zita e del plugin Popups la situazione si riproduceva stabilmente. Soluzione. "Neutralizzare" l'ancora nello script jQuery tramite return false:

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

Problema 4. Scrollify dovrebbe funzionare solo sulla home page e solo per desktop. Soluzione. Racchiudere la chiamata in un controllo sulla classe del body e sulla larghezza della finestra:

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

Scrollify nel 2026: alternative e verdetto

Scrollify non è l'unica soluzione per lo scorrimento a sezioni. Nel 2026 uno sviluppatore WordPress ha almeno tre alternative:

La proprietà CSS scroll-snap-type, implementazione nativa del browser senza JavaScript. Funziona velocemente, ma la personalizzazione dell'animazione è limitata (nessun easing, impossibile impostare la velocità). Per landing page semplici, un'ottima opzione.

Lenis, un moderno motore di smooth scroll dello studio Darkroom. Non si lega rigidamente alle sezioni, ma crea un effetto di fluidità inerziale. Si integra con Elementor tramite codice personalizzato.

Il widget Smooth Scroll di Unlimited Elements per Elementor, una soluzione no-code con impostazioni visive per velocità e frame rate.

Ma se serve esattamente uno scorrimento fotogramma per fotogramma, prevedibile, con navigazione e pieno controllo su ogni aspetto, Scrollify resta uno strumento funzionante e collaudato. 1800 stelle su GitHub, le issue aperte vengono chiuse, lo script vive in produzione su migliaia di siti.

Guarda un breve video sulla configurazione dello smooth scroll in Elementor, l'intero processo dall'installazione del widget al risultato finale è mostrato chiaramente:

⁉️🤔 Domande frequenti

jQuery è necessario per Scrollify nel 2026?

Sì, Scrollify dipende strettamente da jQuery. Se il tuo sito si è completamente liberato di jQuery (ad esempio, usi Bricks o un tema personalizzato in puro JS), meglio orientarsi su Lenis o scroll-snap-type nativo. Ma per un tipico sito WordPress jQuery è quasi certamente già caricato dal tema o da uno dei plugin, non ci sarà carico aggiuntivo.

Cosa è meglio per Elementor: Scrollify o gli effetti di movimento integrati?

Gli Effetti di Movimento integrati di Elementor sono responsabili dell'animazione degli elementi all'interno di una sezione (dissolvenza, scorrimento), non del comportamento dello scroll tra le sezioni. Sono compiti diversi. Scrollify controlla esattamente le transizioni tra i blocchi, si possono e si devono combinare.

Scrollify funziona con Elementor Flexbox Container?

Sì, funziona. Attiva Flexbox Container nelle impostazioni di Elementor, assegna la classe CSS alle sezioni tramite la scheda "Avanzate" del container, la meccanica è la stessa delle sezioni classiche.

Perché Scrollify ha smesso di funzionare dopo l'aggiornamento di Elementor?

Molto probabilmente, la classe CSS o l'ID della sezione sono stati resettati. Elementor con aggiornamenti maggiori a volte resetta gli attributi personalizzati. Verifica che il campo "Classe CSS" in ogni sezione contenga ancora .scrollify, e che gli ID corrispondano a quelli scritti in Scroll Navigation.

Scrollify può essere usato su un sito senza WordPress?

Sì, Scrollify non è legato a WordPress o Elementor. Collega jQuery e jquery.scrollify.js, marca le sezioni HTML con la classe necessaria e chiama $.scrollify(), tutto funzionerà su qualsiasi sito, dal puro HTML a React (con le dovute cautele per la dipendenza da jQuery).

Scrollify o alternativa: cosa usare per un compito specifico

La scelta si riduce a tre scenari. Se hai una classica landing page su Elementor con 5-8 sezioni e navigazione verticale, Scrollify + JetElements Scroll Navigation danno un risultato pronto in un'ora. Se inizi un nuovo progetto senza jQuery e vuoi dipendenze minime, scroll-snap-type su CSS risolverà il compito con un paio di righe. Se hai bisogno di fluidità senza un legame rigido alle sezioni, usa Lenis.

La cosa principale che la pratica ha dimostrato: Scrollify non ti abbandona laddove le soluzioni "di tendenza" falliscono a causa dei conflitti con il pesante ecosistema dei plugin WordPress. A volte la stabilità è più importante della novità.