Lorsqu’un visiteur arrive sur une page conçue avec Elementor et qu’il constate un défilement saccadé avec des sauts entre les sections, la confiance dans le site chute plus vite que le défilement n’atteint le pied de page. Surtout si la page est lourde: vidéo en arrière-plan, effets de parallaxe, une dizaine de sections avec des animations. Le défilement standard du navigateur ne peut pas se caler précisément sur les limites des blocs, il glisse simplement au-delà.

Vous pouvez passer des heures à sélectionner des extensions de mise en cache, de minification et des solutions de contournement. Ou vous pouvez ajouter un script léger qui transforme les transitions brutales en un défilement fluide par sections, comme sur les pages d’atterrissage haut de gamme.

Nous parlons ici de Scrollify, un plugin jQuery créé par Luke Haas, présent sur GitHub depuis des années, qui totalise plus de 1800 étoiles et qui fonctionne encore là où les solutions «modernes» rencontrent des conflits avec Elementor. Pas d’abonnement, pas de tonnes de dépendances, un seul fichier .js et une dizaine de lignes de configuration.

💡 Aperçu rapide:

• Installation de Scrollify: télécharger le script depuis GitHub et l’intégrer dans functions.php
• Configuration des sections dans Elementor: classe CSS, hauteur minimale et marges
• Configuration de base: détail des options scrollSpeed, easing, setHeights et touchScroll
• Navigation verticale: intégration avec le widget Scroll Navigation de JetElements
• Personnalisation avancée: remplacer les cercles standard par des icônes SVG via CSS
• Problèmes courants: marge inférieure, tremblement au défilement, conflit d’ancres et leurs solutions

Qu’est-ce que Scrollify et quelle est sa particularité

Scrollify est un plugin jQuery qui lie de force le défilement aux limites des sections. L’utilisateur tourne la molette, la page ne se déplace pas de manière fluide, elle s’aligne sur le bloc suivant. Le comportement ressemble au balayage entre les écrans d’une application mobile, mais sur ordinateur et via la molette de la souris.

Le principal avantage est la prévisibilité. Vous savez exactement quel bloc un visiteur verra après avoir défilé. Pas de «dépassements» ni de sections à moitié visibles. Le plugin est optimisé pour les appareils tactiles et peut fonctionner avec du contenu dynamique, vous pouvez charger des sections via AJAX, Scrollify recalculera les positions.

Disponibles de série: la navigation par hachage (liens directs vers les sections), l’interruption entre les sections pour les blocs non standard (pied de page, en-tête), les fonctions de rappel before/after/afterRender/afterResize.

Installation et configuration de base

jQuery 1.7 ou une version plus récente est requis. En 2026, cela semble archaïque, mais en pratique, la plupart des thèmes et extensions WordPress chargent encore jQuery dans le pied de page, il n’y aura pas de conflit.

Téléchargez jquery.scrollify.js depuis le dépôt GitHub lukehaas/Scrollify et intégrez-le dans le pied de page du site 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
});

L’option de lancement la plus simple consiste à indiquer à Scrollify les éléments avec une classe CSS spécifique:

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

La liste complète des options de configuration se présente comme suit:

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

Les paramètres clés à ajuster immédiatement: scrollSpeed (vitesse de l’animation en millisecondes, 1100 par défaut, pour les longues pages d’atterrissage, il est préférable de réduire à 600-800), setHeights (ajuster automatiquement la hauteur de la section à la fenêtre d’affichage), updateHash (ajoute #section-name à l’URL lors du défilement).

Intégrer Scrollify avec Elementor: trois étapes

Pour que Scrollify prenne en compte les sections conçues avec Elementor, vous devez les baliser correctement. Des blocs placés au hasard sans classes ne seront tout simplement pas vus par le plugin.

Étape 1: attribuer une classe CSS à chaque section

Ouvrez l’édition de la section dans Elementor, allez dans l’onglet «Avancé» et dans le champ «Classe CSS», saisissez une valeur, par exemple, .scrollify (sans le point, Elementor l’ajoute lui-même). La classe doit être la même pour toutes les sections participant au défilement image par image.

Étape 2: définir une hauteur minimale

Par essais et erreurs, il a été constaté que pour éviter les à-coups lors du défilement, les sections ont besoin d’une hauteur minimale de 100vh et de marges mises à zéro. Dans l’onglet «Mise en page», définissez:

• Hauteur minimale: 100 VH
• Marge intérieure: 0 sur tous les côtés

Étape 3: rédiger la configuration pour votre site

Voici une configuration de production utilisée sur des projets réels. La largeur de l’écran est vérifiée afin que sur les appareils mobiles (moins de 1000px), le défilement reste normal, le défilement par sections sur un téléphone étant plus une gêne qu’une aide:

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

Remarque: .scrollify et .footer sont tous deux passés à section. Le footer ne doit pas participer au défilement section par section comme une section à part entière (il fait généralement moins de 100vh), mais Scrollify doit connaître son existence, c'est à cela que sert standardScrollElements.

Navigation verticale avec JetElements Scroll Navigation

Un défilement section par section sans navigation, c'est comme un livre sans table des matières. Pour permettre au visiteur de passer d'un clic à la section souhaitée, ajoutons un menu vertical.

C'est ici qu'intervient JetElements de Crocoblock, l'un des ensembles de widgets additionnels les plus puissants pour Elementor. Il inclut le widget Scroll Navigation, qui affiche un panneau vertical avec des indicateurs sous forme de points et les lie aux sections.

Après avoir installé JetElements, trouvez le widget dans le panneau et faites-le glisser sur la page. Ensuite, deux actions réciproques.

Premièrement, liez la navigation aux sections. Dans les paramètres du widget, pour chaque élément, indiquez l'ID de la section correspondante:

Ensuite, ouvrez chaque section dans Elementor et inscrivez le même ID dans le champ «CSS ID» de l'onglet «Avancé»:

Le principal réglage auquel il vaut mieux ne pas toucher est l'option «Switch sections completely». Si le contenu du bloc est physiquement plus haut que l'écran de l'utilisateur (par exemple, sur un ordinateur portable avec un petit écran), une partie du contenu sera coupée et non affichée.

Les autres paramètres sont intuitifs. Voici une configuration éprouvée en pratique:

Personnaliser les marqueurs de navigation: remplacer les cercles par des icônes

Les cercles standard de Scroll Navigation sont fonctionnels mais fades. Les remplacer par des icônes SVG se fait avec un seul bloc CSS.

Voici un extrait de code prêt à l'emploi. Pour chaque section, son propre data-anchor et sa propre icône. Les icônes (SVG) doivent être préalablement téléversées dans la médiathèque WordPress et vous devez y substituer 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
}

Pour trouver le data-anchor de votre section, ouvrez les outils de développement dans le navigateur (F12), repérez l'élément de navigation et regardez la valeur de l'attribut.

Effets d'animation: bibliothèque d'easing

La fonction standard easeOutExpo n’est qu’une parmi des dizaines de fonctions de lissage disponibles via jQuery Easing. Vous trouverez le catalogue complet avec une visualisation de chaque courbe sur easings.net.

Pour l’intégrer, téléchargez jquery.easing.1.3.js et liez-le dans le pied de page de la même manière que Scrollify, impérativement avant l’appel à $.scrollify(). Ensuite, dans le paramètre easing, vous pouvez utiliser n’importe quelle fonction du catalogue, de easeInOutCubic et easeOutBounce à easeInOutBack et bien d’autres.

Problèmes courants et leurs solutions

Après plusieurs années d’utilisation de Scrollify sur des sites WordPress, une liste de pièges récurrents s’est constituée. Les voici avec des réponses prêtes à l’emploi.

Problème 1. Après avoir connecté Scrollify, la première section s’affiche avec une marge inférieure d’environ 20 pixels, même si aucun padding n’est défini nulle part. Cause. Le défilement horizontal, masqué via overflow-x: hidden, est techniquement présent dans le DOM. Scrollify tient honnêtement compte de sa hauteur dans ses calculs. Solution. Ajoutez la règle CSS padding-bottom: 20px; à la section.

Problème 2. Le défilement fonctionne mais la page tremble fortement lors du scroll. Cause. Conflit avec un autre plugin jQuery ou un script qui manipule également le scroll. Solution. Désactivez méthodiquement les plugins un par un, en vérifiant le comportement du scroll après chaque désactivation. N’oubliez pas de vider le cache du navigateur et celui du site.

Problème 3. La console développeur affiche l’erreur: Scrollify warning: ID matches hash value, this will cause the page to anchor. Cause. Un plugin insère une ancre dans l’URL de la page, ce qui empêche Scrollify de déterminer correctement la position actuelle. Par exemple, avec la combinaison du thème Zita et du plugin Popups, la situation se reproduisait de manière stable. Solution. «Neutralisez» l’ancre dans le script jQuery via return false:

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

Problème 4. Scrollify doit fonctionner uniquement sur la page d’accueil et seulement pour le desktop. Solution. Enveloppez l’appel dans une vérification de la classe de body et de la largeur de la fenêtre:

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

Scrollify en 2026: alternatives et verdict

Scrollify n’est pas la seule solution pour le défilement par sections. En 2026, un développeur WordPress dispose d’au moins trois alternatives:

La propriété CSS scroll-snap-type, implémentation native du navigateur sans JavaScript. Fonctionne rapidement, mais la personnalisation de l’animation est limitée (pas d’easing, impossibilité de régler la vitesse). Pour des landing pages simples, une excellente option.

Lenis, un moteur de défilement fluide moderne du studio Darkroom. Ne se lie pas rigidement aux sections, mais crée un effet de fluidité inertielle. S’intègre avec Elementor via du code personnalisé.

Le widget Smooth Scroll de Unlimited Elements pour Elementor, une solution sans code avec des paramètres visuels pour la vitesse et le taux de rafraîchissement.

Mais si vous avez besoin d’un défilement image par image, prévisible, avec navigation et un contrôle total sur chaque aspect, Scrollify reste un outil fonctionnel et éprouvé. 1800 étoiles sur GitHub, les tickets ouverts sont traités, le script vit en production sur des milliers de sites.

Regardez une courte vidéo sur la configuration du défilement fluide dans Elementor, tout le processus, de l’installation du widget au résultat final, y est clairement montré:

⁉️🤔 Foire aux questions

jQuery est-il nécessaire pour Scrollify en 2026?

Oui, Scrollify dépend étroitement de jQuery. Si votre site s’est complètement débarrassé de jQuery (par exemple, vous utilisez Bricks ou un thème sur mesure en JS pur), mieux vaut vous tourner vers Lenis ou le scroll-snap-type natif. Mais pour un site WordPress typique, jQuery est presque certainement déjà chargé par le thème ou l’un des plugins, il n’y aura pas de charge supplémentaire.

Qu’est-ce qui est mieux pour Elementor: Scrollify ou les effets de mouvement intégrés?

Les effets de mouvement intégrés d’Elementor servent à animer les éléments à l’intérieur d’une section (fondu, glissement), pas le comportement du défilement entre les sections. Ce sont des tâches différentes. Scrollify contrôle précisément les transitions entre les blocs, ils peuvent et doivent être combinés.

Scrollify fonctionne-t-il avec les conteneurs Flexbox d’Elementor?

Oui, il fonctionne. Activez les conteneurs Flexbox dans les paramètres d’Elementor, attribuez une classe CSS aux sections via l’onglet «Avancé» du conteneur, la mécanique est la même qu’avec les sections classiques.

Pourquoi Scrollify a-t-il cessé de fonctionner après la mise à jour d’Elementor?

Très probablement, la classe CSS ou l’ID de la section a été réinitialisé. Elementor, lors de mises à jour majeures, réinitialise parfois les attributs personnalisés. Vérifiez que le champ «Classe CSS» de chaque section contient toujours .scrollify et que les ID correspondent à ceux écrits dans Scroll Navigation.

Peut-on utiliser Scrollify sur un site sans WordPress?

Oui, Scrollify n’est pas lié à WordPress ou Elementor. Connectez jQuery et jquery.scrollify.js, balisez les sections HTML avec la classe nécessaire et appelez $.scrollify(), tout fonctionnera sur n’importe quel site, du HTML pur à React (avec des réserves concernant la dépendance à jQuery).

Scrollify ou alternative: que choisir selon la tâche

Le choix se résume à trois scénarios. Si vous avez une landing page classique sur Elementor avec 5 à 8 sections et une navigation verticale, Scrollify + JetElements Scroll Navigation donnent un résultat prêt en une heure. Si vous démarrez un nouveau projet sans jQuery et souhaitez un minimum de dépendances, scroll-snap-type en CSS résoudra la tâche en quelques lignes. Si vous avez besoin de fluidité sans liaison rigide aux sections, utilisez Lenis.

La principale leçon que la pratique a montrée: Scrollify ne vous laisse pas tomber là où les solutions «tendance» échouent à cause de conflits avec l’écosystème lourd des plugins WordPress. Parfois, la stabilité est plus importante que la nouveauté.