Erweiterte Konfiguration

Wie erstellen Sie auf einer Website einen Link zurück zum Seitenanfang?

Dieses Tutorial zeigt Ihnen, wie Sie auf Ihrer Website einen Link zurück an den Anfang einer Webseite einfügen.

Nach dem Lesen einer langen Webseite ist es hilfreich, Besuchern anzubieten, schnell wieder an den Anfang der Seite Ihrer Website zu springen und von dort weiter zu navigieren.
So verbessern Sie das Erlebnis der Besucher, die die von Ihnen erstellte Website besuchen.

Hier ein praktischer HTML-Trick, um einen Link zurück zum Seitenanfang Ihrer Website hinzuzufügen.

Ein Link zurück nach oben: was ist das?

Ein Link zurück nach oben ist in HTML ein Anker. Wenn Sie mehr über Anker im Allgemeinen und ihre Verwendung erfahren möchten, empfehlen wir das Tutorial Einen Anker in einer Webseite setzen.

Damit man nach oben zurückspringen kann, müssen wir also einen Anker hinzufügen, der auf den Anfang der Website zeigt.

Den Link „Nach oben“ einfügen

Öffnen Sie zunächst in den Einstellungen Ihres Managers die Zone, in der Sie Ihre Fußzeile bearbeiten und den Link dort einfügen können (dieser Bereich ist ab einem PRO-Angebot bearbeitbar).

Fügen Sie im Bereich am unteren Ende Ihrer Website eine Zeile oder eine neue Spalte hinzu und wählen Sie den HTML-Editor.

Kopieren Sie dann den folgenden HTML-Link und fügen Sie ihn ein: 

<a href="#" class="btn btn-default">Nach oben ↑</a>

Sie können den Text Nach oben ↑ durch einen anderen ersetzen und die Klassen btn btn-default durch btn btn-primary, um Ihrer Schaltfläche einen anderen Stil zu geben.

Beispiel: 

<a href="#" class="btn btn-primary">Seitenanfang</a>

Wenn Sie zufrieden sind, speichern Sie.

Wenn Sie Ihren Link testen, werden Sie feststellen, dass Sie abrupt an den Anfang der Website springen.

Damit die Seite stattdessen sanft nach oben scrollt, müssen Sie eine CSS-Regel hinzufügen (sie wird von den meisten aktuellen Browsern unterstützt).

Kopieren Sie, ebenfalls in diesen Zonen, den folgenden CSS-Code in das Feld für zusätzliches CSS und speichern Sie:

html {
  scroll-behavior: smooth;
}

Jetzt können Sie über die entsprechende Schaltfläche oben rechts im Eingabefeld in den visuellen Editor wechseln und Ihrer Schaltfläche weitere Stile geben.

Hier zum Beispiel eine zentrierte Schaltfläche in Kursivschrift.

Schaltfläche zurück zum Seitenanfang

Gut zu wissen

Manche Themes bringen von Haus aus eine Schaltfläche für den Rücksprung nach oben mit.

Die Schaltfläche erscheint dann automatisch unten rechts auf der Seite, sobald Sie weit genug nach unten gescrollt haben.

Zögern Sie nicht, die Konfiguration Ihres aktuellen Themes zu sichern und andere Themes zu testen, um die Funktionen zu entdecken, die sie Ihnen bieten.

Schaltfläche zurück zum Seitenanfang