Wie du in WordPress Sprungmarken setzt (mit Smooth Scroll)

Jonas Tietgen

Mit Sprungmarken kannst du deine Besucher an eine gewisse Stelle innerhalb einer Seite führen.

Du kennst sie vermutlich aus Inhaltsverzeichnissen (wie auch hier im Blog auf der linken Seite), bei denen du mit einem Klick zu einem bestimmten Abschnitt auf der Seite springst.

Damit das Springen nicht zu plötzlich und verwirrend ist, gibt es eine Funktion namens “Smooth Scroll”, durch die es mehr ein automatisches und schnelles Scrollen ist, als ein Springen.

Wie du in WordPress Sprungmarken einbaust und zudem Smooth Scrolling hinzufügst, erfährst du in diesem Tutorial.

Was ist eine Sprungmarke bzw. ein Anchor Link?

Mit Sprungmarken (oder auch Anchor Link) kannst du den Nutzer innerhalb einer Seite führen. Mit einem Klick auf diesen Anchor Link springt die Seite zu einer anderen Stelle, beispielsweise einer bestimmten Überschrift.

Das ist vor allem bei sehr langen Seiten von Vorteil, da der Nutzer schnell zu der gewünschten Stelle kommt.

Es hat aber auch Vorteile für SEO, da Google die Sprungmarken als sogenannte “Sitelinks” in den Suchergebnissen anzeigen kann, wodurch der Nutzer direkt von Google auf einen gewissen Abschnitt deiner Seite kommt.

Wenn du einen solchen Jumplink ausprobieren möchtest, klicke einfach im Inhaltsverzeichnis in der linken Sidebar auf einen der aufgelisteten Abschnitte.

So fügst du Sprungmarken ein

Grundsätzlich besteht eine Sprungmarke aus zwei Teilen:

Der Anchor / Anker (der eine HTML ID zugewiesen bekommt):
Der Anker ist einfach ein Name, den du diesem Abschnitt gibst. Er muss komplett kleingeschrieben sein und darf keine Leerzeichen oder Sonderzeichen enthalten (nutze Minus zur Trennung).

Der Link (der per #ID auf den Anchor verweist):
Du setzt einen normalen Link und trägst als Ziel deine vergebene ID mit einem davorstehenden # ein. Dadurch wird der normale Link zu einem Anchor Link.

Mit diesem Prinzip kannst du bei jedem Page Builder einen Anchor Link einbauen. Wähle hier, mit welchem Page Builder du arbeitest und springe (mit der Macht der Sprungmarken) zu der passenden Anleitung:

Im Gutenberg Editor

Zunächst erstellen wir den Anker. Dafür wählst du den Block an der gewünschte Stelle aus, zu der gesprungen werden soll.

Jetzt schreibst du in der rechten Sidebar des Gutenberg Editors ganz unten unter “Erweitert” den Namen der Sprungmarke (in diesem Beispiel: name-der-sprungmarke) in das Feld bei “HTML-Anker”:

Einen HTML-Anker im Gutenberg Editor einfügen
Trage an der Stelle, zu der gesprungen werden soll, einen HTML-Anker ein

Anschließend wählst du den Button, Text oder ein anderes Element aus, das den Link zum Anker bekommen soll. Jetzt hinterlegst du für das Element als Link und gibst als Ziel den Namen des HTML-Ankers mit einem davorstehenden # an.

In unserem Beispiel heißt der Link also: #name-der-sprungmarke

Das sieht dann in der Praxis so aus:

Im Gutenberg Editor einen Link zu einem Anchor Link einfügen
Füge einen Link zu deinem Anchor in diesem Format ein: #name-der-sprungmarke

Nach dem Speichern kannst du den Anchor Link im Frontend anklicken und springst zu der gewünschten Stelle.

In Thrive Architect

Der Thrive Architect hat eine integrierte Funktion für das Erstellen von Anchor Links.

Wähle einfach das Element aus, das anklickbar sein soll und wähle anschließend das Anker-Icon in den Main Options neben “Button Link” (bei Buttons und ähnlichen) oder nutze in der Werkzeugleiste das Link-Icon und wähle “JumpLink” aus (bei Texten):

Anchor Link in Thrive Architect anlegen
Wähle das Anker-Icon, wenn du die Sprungmarke auf einem Button oder ähnlichem verlinken willst

Nun musst du nur noch auf “Select target” klicken und kannst das gewünschte Element innerhalb der Seite wählen, auf das du springen möchtest:

Thrive Architect Sprungmarke wählen
Wähle das Element, zu dem der Anchor Link führen soll

Anschließend kannst du optional noch das “Smooth Scrolling” aktivieren, indem du den Haken in der linken Sidebar bei “Smooth animation” setzt. Dadurch springt die Seite nicht mehr ruckartig zur Sprungmarke, sondern scrollt nach unten / oben.

In Divi

In Divi musst du zunächst die ID für den Anker hinterlegen (in Divi heißt sie “CSS-ID”) und kannst diese anschließend an der gewünschten Stelle verlinken.

Zunächst legen wir den Anker fest. Scrolle zu der Stelle, zu welcher der Anchor Link springen soll und bearbeite das dortige Element. Wechsle auf den Reiter “Erweitert”, öffne den Tab “CSS-ID & Klassen” und hinterlege in dem Feld für die CSS-ID den gewünschten Namen für die Sprungmarke:

CSS-ID für Sprungmarke in Divi festlegen
Hinterlege eine “CSS-ID” als Sprungmarke für deinen Anchor-Link

Jetzt kannst du diese Sprungmarke an einer beliebigen Stelle verlinken. Hinterlege einen Link und gibt als Ziel den Namen der CSS-ID mit einem davorstehenden # an.

In unserem Beispiel heißt der Link also: #name-der-sprungmarke

Das sieht dann in der Praxis für einen Button so aus:

Einen Link als Anchor-Link in Divi einfügen
Füge einen Link zu der CSS-ID in diesem Format ein: #name-der-sprungmarke

Möchtest du einen Text verlinken, kannst du den Link im gleichen Format in der Werkzeugleiste bei dem Link-Icon hinterlegen.

In Elementor

Um im Elementor auf eine gewisse Stelle innerhalb einer Seite zu verlinken, musst du den Anker bei einem Abschnitt oder einer Spalte hinterlegen.

Dafür wählst du den Abschnitt oder die Spalte aus, zu der gesprungen werden soll. Anschließend wechselst du in den Reiter “Erweitert” und findest in dem gleichnamigen Tab das Feld für “CSS ID”. Hier gibst du nun den Namen deiner Sprungmarke ein:

CSS ID für Sprungmarke in Elementor hinterlegen
Hinterlege in einem Abschnitt oder einer Spalte als “CSS ID” den Namen deiner Sprungmarke

Jetzt kannst du diese Sprungmarke an einer beliebigen Stelle verlinken. Hinterlege einen Link und gibt als Ziel den Namen der CSS ID mit einem davorstehenden # an.

In unserem Beispiel heißt der Link also: #name-der-sprungmarke

Das sieht in Elementor dann so aus:

Den Link zu einer Sprungmarke einfügen (Anchor Link) in Elementor
Füge einen Link zu der Sprungmarke (CSS ID) in diesem Format ein: #name-der-sprungmarke

Möchtest du Text verlinken, nutze das Link-Icon in der Werkzeugleiste, nachdem du den gewünschten Text markiert hast. Platziere als Link den Namen der Sprungmarke mit einem # davor.

Smooth Scrolling einbauen (mit und ohne Plugin)

Wenn du deinen Anchor-Link eingebaut hast, springt die Seite beim Klick zwar an die gewünschte Stelle, das sieht aber sehr verwirrend aus für den Nutzer.

Besser ist es, wenn die Seite zu der ausgewählten Stelle scrollt. Dadurch weiß der Nutzer weiterhin, wo auf der Seite er sich befindet und verliert die Orientierung nicht.

Meistens wird für den Einbau des Smooth Scroll in WordPress ein Plugin empfohlen. Das ist auch ein gutes Vorgehen, aber es geht per CSS noch besser und ganz ohne Plugin.

Ich beschreibe dir beide Vorgehensweisen, suche dir eine aus (meine Empfehlung ist die Nutzung des CSS):

In WordPress Smooth Scrolling per CSS einfügen

Mit wenigen Zeilen CSS, die du dir ganz einfach kopieren kannst, bekommst du Smooth Scolling in WordPress aktiviert.

Der einzige kleine “Nachteil” ist die Browserkompatibilität. Während das mit allen gängigen und aktuellen Browsern funktioniert, haben folgende (teils sehr veraltete) Browserversionen Probleme damit:

Google Chrome vor Version 74
Microsoft Edge vor Version 78
Mozilla Firefox vor Version 63
Apple Safari vor Version 10.1
Quelle

Füge den CSS Code am besten in deinem Customizer ein (“Design” → “Customizer” → “Zusätzliches CSS”). Mit dem folgenden Code aktivierst du das Smooth Scrolling:

/*aktiviert smooth scrolling*/

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html{
    scroll-behavior: auto;
  }
}

Damit das verlinkte Element nicht ganz oben am Browserende klebt, empfehle ich dir zusätzlich diesen Code, um einen kleinen Abstand nach oben einzubauen. Dieser greift nur, wenn ein Element per Anchor-Link aufgerufen wird. Die eingestellten 50 Pixel kannst du natürlich nach Belieben ändern:

/* legt den oberen abstand bei smooth scrolling fest */

*[id] {
    scroll-margin-top: 50px
} 

Wundere dich nicht, wenn der Customizer die Regeln rot hervorhebt, der Code funktioniert trotzdem:

Smooth Scrolling per CSS in WordPress aktivieren
So sieht der finale CSS Code für Smooth Scrolling im WordPress Customizer aus

In WordPress Smooth Scrolling per Plugin einfügen

Wie oben angesprochen, gibt es natürlich auch für diese Funktionalität kostenlose WordPress Plugins.

Wenn du Anchor Links und Smooth Scrolling für ein Inhaltsverzeichnis nutzen möchtest, installiere dir das kostenlose LuckyWP Table of Contents.

Wenn du für weitere Sprungmarken Smooth Scrolling per Plugin aktivieren möchtest, installiere dir das Plugin “Surbma | Smooth Scroll“. Es hat keinerlei Einstellungsmöglichkeiten. Du installierst und aktivierst es, anschließend ist der Smooth Scrolling Effekt bei all deinen Anchor Links aktiv.


Jonas Tietgen

Dein WordPress Ninja mit 10+ Jahren Erfahrung, Gründer von WP Ninjas und SEO Nerd.

Jonas hilft Solopreneuren, ihre WordPress Websites selber überarbeiten, pflegen und optimieren zu können.

Schon seit er 14 ist, baut er Websites mit WordPress und arbeitet Jahren täglich mit WordPress. Dadurch hat er Erfahrung mit so ziemlich jedem Theme und Plugin, kennt WordPress auswendig und toppt das Ganze mit einer Liebe zu Webdesign (inklusive Webdesign-Studium) und SEO.

In über 120 Tutorials stellt er dir in seinem Blog sein gesamtes Wissen zur Verfügung, erweitert dein SEO-Wissen in seinem Search Effect Podcast und unterstützt dich in Coachings und über seinen beliebten Mitgliederbereich.

Abseits von WordPress nerdet Jonas gerne über Gesundheit ab, macht viel Krafttraining und weiteren Sport und baut immer wieder spannende Website-Projekte wie das HomeGym-HQ auf.


Google Fonts lokal und DSGVO-konform laden - endlich Sicherheit!

46 Plugins & Tools, dank denen ich 20.000 Besucher monatlich bekomme!

Das WordPress Toolkit kostenlos für dich

Abonniere meine exklusiven WordPress Tipps, News und mein Experten-Wissen, das ich sonst nirgends teile!

 

...und sichere dir das WordPress Toolkit kostenlos!

Nach der Willkommenssequenz (5 Mails) kommen die E-Mails im Normalfall 1x / Woche. Du kannst dich natürlich jederzeit abmelden und bekommst keinen Spam! Datenschutz

46 Plugins & Tools, dank denen ich 20.000 Besucher monatlich bekomme!

Das WordPress Toolkit kostenlos für dich

Abonniere meine exklusiven WordPress Tipps, News und mein Experten-Wissen, das ich sonst nirgends teile!

 

...und sichere dir das WordPress Toolkit kostenlos!

Nach der Willkommenssequenz (5 Mails) kommen die E-Mails im Normalfall 1x / Woche. Du kannst dich natürlich jederzeit abmelden und bekommst keinen Spam! Datenschutz

WordPress Cookie Plugin von Real Cookie Banner