Wenn ein Besucher auf einer mit Elementor erstellten Seite landet und ein ruckartiges Scrollen mit Sprüngen zwischen den Sektionen erlebt, sinkt das Vertrauen in die Seite schneller, als der Scrollbalken den Footer erreicht. Besonders dann, wenn die Seite schwer ist: Hintergrundvideo, Parallax-Effekte, ein Dutzend animierte Abschnitte. Das standardmäßige Browser-Scrolling kann nicht sauber an Blockgrenzen einrasten, es gleitet einfach darüber hinweg.

Sie können Stunden damit verbringen, Caching-Plugins, Minifizierung und Workarounds auszuwählen. Oder Sie fügen ein schlankes Skript hinzu, das holprige Übergänge in geschmeidiges Sektions-Umblättern verwandelt, wie auf hochwertigen Landingpages.

Die Rede ist von Scrollify, einem jQuery-Plugin von Luke Haas, das seit Jahren auf GitHub existiert, über 1800 Sterne hat und immer noch dort funktioniert, wo „moderne" Lösungen über Konflikte mit Elementor stolpern. Keine Abonnements, keine Unmengen an Abhängigkeiten, eine .js-Datei und ein Dutzend Konfigurationszeilen.

💡 Kurzüberblick:

• Scrollify installieren: Skript von GitHub herunterladen und in functions.php einbinden
• Sektionen in Elementor einrichten: CSS-Klasse, Mindesthöhe und Außenabstände
• Grundkonfiguration: Aufschlüsselung der Optionen scrollSpeed, easing, setHeights und touchScroll
• Vertikale Navigation: Integration mit dem Scroll-Navigation-Widget von JetElements
• Feine Anpassung: Standard-Kreise durch SVG-Icons per CSS ersetzen
• Häufige Probleme: unterer Außenabstand, Scroll-Zittern, Ankerkonflikt und deren Lösungen

Was Scrollify ist und was das Besondere daran ist

Scrollify ist ein jQuery-Plugin, das das Scrollen zwangsweise an Sektionsgrenzen bindet. Der Nutzer dreht am Mausrad, die Seite bewegt sich nicht fließend, sondern rastet am nächsten Block ein. Das Verhalten ähnelt dem Wischen zwischen Bildschirmen in einer mobilen App, nur eben am Desktop und per Mausrad.

Der Hauptvorteil ist die Vorhersagbarkeit. Sie wissen genau, welchen Block ein Besucher nach dem Scrollen sehen wird. Kein „Übers-Ziel-Hinausschießen" und keine halb gescrollten Sektionen. Das Plugin ist für Touch-Geräte optimiert und kann mit dynamischen Inhalten umgehen, Sie können Sektionen per AJAX laden, Scrollify berechnet die Positionen neu.

Out of the box verfügbar: Hash-Navigation (direkte Links zu Sektionen), Unterbrechung zwischen Sektionen für nicht standardmäßige Blöcke (Footer, Header), Callback-Funktionen before/after/afterRender/afterResize.

Installation und Grundkonfiguration

jQuery 1.7 oder neuer wird benötigt. Im Jahr 2026 klingt das archaisch, aber in der Praxis ziehen die meisten WordPress-Themes und Plugins jQuery immer noch in den Footer, einen Konflikt wird es nicht geben.

Laden Sie jquery.scrollify.js aus dem GitHub-Repository lukehaas/Scrollify herunter und binden Sie es im Seiten-Footer über functions.php ein:

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

Die einfachste Startoption besteht darin, Scrollify auf Elemente mit einer bestimmten CSS-Klasse zu verweisen:

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

Die vollständige Liste der Konfigurationsoptionen sieht so aus:

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

Wichtige Parameter, die es sich lohnt, sofort anzupassen: scrollSpeed (Animationsgeschwindigkeit in Millisekunden, Standard 1100, bei langen Landingpages besser auf 600-800 reduzieren), setHeights (automatische Anpassung der Sektionshöhe an den Viewport), updateHash (fügt beim Scrollen #section-name zur URL hinzu).

Scrollify mit Elementor integrieren: drei Schritte

Damit Scrollify die in Elementor erstellten Sektionen erfasst, müssen Sie diese korrekt auszeichnen. Willkürlich platzierte Blöcke ohne Klassen werden vom Plugin schlicht nicht gesehen.

Schritt 1: Jeder Sektion eine CSS-Klasse zuweisen

Öffnen Sie die Sektionsbearbeitung in Elementor, gehen Sie zum Tab „Erweitert" und geben Sie im Feld „CSS-Klasse" einen Wert ein, zum Beispiel .scrollify (ohne den Punkt, Elementor fügt ihn selbst hinzu). Die Klasse sollte für alle Sektionen, die am bildweisen Scrollen teilnehmen, gleich sein.

Schritt 2: Mindesthöhe festlegen

Durch Ausprobieren hat sich gezeigt: Um ein Ruckeln beim Scrollen zu vermeiden, benötigen die Sektionen eine Mindesthöhe von 100vh und auf null gesetzte Außenabstände. Legen Sie auf dem Tab „Layout" fest:

• Mindesthöhe: 100 VH
• Padding: 0 auf allen Seiten

Schritt 3: Konfiguration für Ihre Seite schreiben

Nachfolgend sehen Sie eine produktiv genutzte Konfiguration, die auf realen Projekten eingesetzt wird. Die Bildschirmbreite wird geprüft, damit auf mobilen Geräten (weniger als 1000px) das Scrollen normal bleibt, sektionsweises Scrollen auf einem Telefon ist eher hinderlich als hilfreich:

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

Hinweis: Sowohl .scrollify als auch .footer werden an section übergeben. Der Footer soll nicht als vollwertige Sektion am bildweisen Scrollen teilnehmen (er ist in der Regel kleiner als 100vh), aber Scrollify muss von ihm wissen, genau dafür ist standardScrollElements vorgesehen.

Vertikale Navigation per JetElements Scroll Navigation

Bildweises Scrollen ohne Navigation ist wie ein Buch ohne Inhaltsverzeichnis. Damit ein Besucher mit einem Klick zur gewünschten Sektion springen kann, fügen wir ein vertikales Menü hinzu.

Hier kommt JetElements von Crocoblock ins Spiel, eines der leistungsfähigsten Sets zusätzlicher Widgets für Elementor. Es enthält das Widget Scroll Navigation, das ein vertikales Panel mit Punkt-Indikatoren zeichnet und diese mit Sektionen verknüpft.

Nach der Installation von JetElements finden Sie das Widget im Panel und ziehen es auf die Seite. Anschließend sind zwei wechselseitige Aktionen erforderlich.

Erstens: Verknüpfen Sie die Navigation mit den Sektionen. Geben Sie in den Widget-Einstellungen für jedes Element die ID der entsprechenden Sektion an:

Öffnen Sie dann jede Sektion in Elementor und tragen Sie dieselbe ID im Feld „CSS-ID" auf dem Tab „Erweitert" ein:

Die wichtigste Einstellung, die Sie besser nicht verändern, ist der Schalter „Sektionen vollständig umschalten". Wenn der Blockinhalt physisch höher ist als der Bildschirm des Nutzers (zum Beispiel auf einem Laptop mit kleinem Display), wird ein Teil des Inhalts abgeschnitten und nicht angezeigt.

Die übrigen Parameter sind intuitiv verständlich. Hier ein in der Praxis bewährtes Set:

Anpassung der Navigationsmarker: Kreise durch Icons ersetzen

Standardkreise in der Scroll Navigation sind funktional, aber langweilig. Sie durch SVG-Icons zu ersetzen, ist eine Sache von einem CSS-Block.

Nachfolgend ein fertiges Snippet. Für jede Sektion ein eigenes data-anchor und ein eigenes Icon. Icons (SVG) sollten vorab in die WordPress-Mediathek hochgeladen werden und ersetzen die 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
}

Um das data-anchor Ihrer Sektion zu finden, öffnen Sie die Entwicklertools im Browser (F12), suchen Sie das Navigationselement und sehen Sie sich den Attributwert an.

Animationseffekte: Easing-Bibliothek

Die Standardfunktion easeOutExpo ist nur eine von Dutzenden Glättungsfunktionen, die über jQuery Easing verfügbar sind. Den vollständigen Katalog mit Visualisierung jeder Kurve finden Sie auf easings.net.

Zur Einbindung laden Sie jquery.easing.1.3.js herunter und binden es im Footer ähnlich wie Scrollify ein, zwingend vor dem Aufruf von $.scrollify(). Danach können Sie im Parameter easing jede beliebige Funktion aus dem Katalog verwenden, von easeInOutCubic und easeOutBounce bis zu easeInOutBack und Dutzenden weiteren.

Häufige Probleme und ihre Lösungen

Über mehrere Jahre des Einsatzes von Scrollify auf WordPress-Seiten hat sich eine Liste wiederkehrender Stolperfallen angesammelt. Hier sind sie mit fertigen Antworten.

Problem 1. Nach dem Einbinden von Scrollify wird die erste Sektion mit einem unteren Abstand von etwa 20 Pixeln angezeigt, obwohl nirgends ein Padding gesetzt ist. Ursache. Die horizontale Bildlaufleiste, ausgeblendet über overflow-x: hidden, ist technisch im DOM vorhanden. Scrollify berücksichtigt deren Höhe ehrlicherweise in den Berechnungen. Lösung. Fügen Sie der Sektion die CSS-Regel padding-bottom: 20px; hinzu.

Problem 2. Der Bildlauf funktioniert, aber die Seite wackelt beim Scrollen stark. Ursache. Konflikt mit einem anderen jQuery-Plugin oder Skript, das ebenfalls in den Bildlauf eingreift. Lösung. Deaktivieren Sie methodisch Plugins einzeln und prüfen Sie das Scrollverhalten nach jeder Deaktivierung. Vergessen Sie nicht, den Browser- und den Site-Cache zu leeren.

Problem 3. Die Entwicklerkonsole gibt den Fehler aus: Scrollify warning: ID matches hash value, this will cause the page to anchor. Ursache. Ein Plugin fügt einen Anker in die Seiten-URL ein, wodurch Scrollify die aktuelle Position nicht korrekt bestimmen kann. Beispielsweise ließ sich die Situation mit der Kombination aus Zita-Theme und Popups-Plugin stabil reproduzieren. Lösung. „Neutralisieren" Sie den Anker im jQuery-Skript über return false:

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

Problem 4. Scrollify soll nur auf der Startseite und nur für Desktop funktionieren. Lösung. Verpacken Sie den Aufruf in eine Prüfung auf die body-Klasse und die Fensterbreite:

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

Scrollify 2026: Alternativen und Fazit

Scrollify ist nicht die einzige Lösung für sektionsweises Scrollen. Einem WordPress-Entwickler stehen 2026 mindestens drei Alternativen zur Verfügung:

Die CSS-Eigenschaft scroll-snap-type, native Browser-Implementierung ohne JavaScript. Arbeitet schnell, aber die Animationsanpassung ist begrenzt (kein Easing, keine einstellbare Geschwindigkeit). Für einfache Landingpages eine ausgezeichnete Option.

Lenis, eine moderne Smooth-Scroll-Engine von Darkroom Studio. Bindet nicht starr an Sektionen, sondern erzeugt einen Effekt von träger Geschmeidigkeit. Lässt sich per Custom Code in Elementor integrieren.

Das Smooth Scroll-Widget von Unlimited Elements für Elementor, eine No-Code-Lösung mit visuellen Einstellungen für Geschwindigkeit und Bildrate.

Wenn Sie jedoch exakt bildgenaues, vorhersagbares Scrollen mit Navigation und voller Kontrolle über jeden Aspekt benötigen, bleibt Scrollify ein funktionierendes und bewährtes Werkzeug. 1800 Sterne auf GitHub, offene Issues werden geschlossen, das Skript lebt produktiv auf Tausenden von Seiten.

Sehen Sie sich ein kurzes Video zur Einrichtung von Smooth Scroll in Elementor an, der gesamte Prozess von der Widget-Installation bis zum Endergebnis wird anschaulich gezeigt:

⁉️🤔 Häufig gestellte Fragen

Ist jQuery für Scrollify 2026 erforderlich?

Ja, Scrollify ist eng an jQuery gebunden. Wenn Ihre Seite jQuery vollständig abgeschafft hat (weil Sie beispielsweise Bricks oder ein Custom-Theme auf reinem JS nutzen), schauen Sie besser auf Lenis oder natives scroll-snap-type. Für eine typische WordPress-Seite wird jQuery jedoch mit ziemlicher Sicherheit bereits vom Theme oder einem der Plugins geladen, es entsteht keine zusätzliche Last.

Was ist besser für Elementor: Scrollify oder die eingebauten Bewegungseffekte?

Die eingebauten Bewegungseffekte von Elementor sind für die Animation von Elementen innerhalb einer Sektion zuständig (Einblenden, Verschieben), nicht für das Scrollverhalten zwischen Sektionen. Das sind unterschiedliche Aufgaben. Scrollify steuert genau die Übergänge zwischen Blöcken, beides kann und sollte kombiniert werden.

Funktioniert Scrollify mit dem Elementor Flexbox-Container?

Ja, es funktioniert. Aktivieren Sie den Flexbox-Container in den Elementor-Einstellungen, weisen Sie den Sektionen über den Tab „Erweitert" des Containers eine CSS-Klasse zu, die Mechanik ist dieselbe wie bei klassischen Sektionen.

Warum funktioniert Scrollify nach einem Elementor-Update nicht mehr?

Höchstwahrscheinlich wurde die CSS-Klasse oder ID der Sektion zurückgesetzt. Elementor setzt bei größeren Updates mitunter benutzerdefinierte Attribute zurück. Prüfen Sie, ob das Feld „CSS-Klasse" in jeder Sektion weiterhin .scrollify enthält und die IDs mit denen in der Scroll-Navigation übereinstimmen.

Kann Scrollify auf einer Seite ohne WordPress verwendet werden?

Ja, Scrollify ist nicht an WordPress oder Elementor gebunden. Binden Sie jQuery und jquery.scrollify.js ein, zeichnen Sie HTML-Sektionen mit der benötigten Klasse aus und rufen Sie $.scrollify() auf, alles funktioniert auf jeder Seite, von reinem HTML bis React (mit Einschränkungen bezüglich der jQuery-Abhängigkeit).

Scrollify oder Alternative: Was für welche Aufgabe verwenden

Die Wahl läuft auf drei Szenarien hinaus. Wenn Sie eine klassische Landingpage auf Elementor mit 5-8 Sektionen und vertikaler Navigation haben, liefern Scrollify + JetElements Scroll Navigation in einer Stunde ein fertiges Ergebnis. Wenn Sie ein neues Projekt ohne jQuery starten und minimale Abhängigkeiten wünschen, löst scroll-snap-type per CSS die Aufgabe mit wenigen Zeilen. Wenn Sie Geschmeidigkeit ohne starre Bindung an Sektionen benötigen, verwenden Sie Lenis.

Die wichtigste Erkenntnis aus der Praxis: Scrollify lässt Sie dort nicht im Stich, wo „angesagte" Lösungen aufgrund von Konflikten mit dem schwergewichtigen Ökosystem der WordPress-Plugins versagen. Manchmal ist Stabilität wichtiger als Neuheit.