HTML-Code für die Schaltfläche ‘Nach oben’
Ihr ‘Nach oben’-Widget erstellen
Screenshots
Warum Nutzer Elfsight lieben.
Wäre es nicht schön, wenn Ihre Website Besucher mühelos führt? Das Elfsight Schaltfläche ‘Nach oben’-Widget tut genau das. Es bietet den Lesern eine freundliche Abkürzung, um zum Anfang der Seite zu springen, wodurch lange Seiten leichter zu erkunden sind. Die Einrichtung dauert nur wenige Minuten und funktioniert auch, wenn Sie kein Technikexperte sind – kopieren Sie einfach ein kleines HTML-Code-Snippet, fügen Sie es auf Ihrer Website ein, und schon kann es losgehen.
Wenn Sie sich jemals gefragt haben, wie man eine Schaltfläche “Nach oben” in HTML erstellt, erspart Ihnen dieses Widget die mühsame Codierung von Grund auf. Es kümmert sich automatisch um Design, Animation und Positionierung.
Wusstest du schon?
Die Nielsen Norman Group hat herausgefunden, dass Nutzer den Großteil ihrer Betrachtungszeit ganz oben auf der Seite verbringen.
Nutzen Sie noch heute das Elfsight Back to Top-Widget, damit Besucher zügig nach oben gelangen – so wirken lange Seiten ordentlich und stressfrei.
Kernfunktionen der HTML-Schaltfläche ‘Nach oben’
Lassen Sie die Navigation einfach, schnell und benutzerfreundlich gestalten. So sieht Ihr Alltag aus:
- Flexible Platzierung: Wählen Sie eine dezente schwebende Schaltfläche oder integrieren Sie sie direkt in Ihren Inhalt – beides ist schnell eingerichtet.
- Individuelles Erscheinungsbild: Farben, Formen, Symbole, Größe, Schatten, Beschriftung – passen Sie es mit wenigen Klicks an Ihr Branding an.
- Intelligentes Verhalten: Nach dem Scrollen von X Pixeln anzeigen, am oberen Rand ausblenden, sanftes Scrollen hinzufügen und die Scrollgeschwindigkeit nach Ihren Wünschen anpassen.
- Standardmäßig mobil nutzbar: Sieht gut auf Smartphones und Tablets aus, mit gut erreichbaren Touchzonen und schlanker Performance.
- Mehrere Positionen: Unten rechts, unten links – die am besten zu Ihrem Layout passen.
- Barrierefrei: ARIA-Labels, Fokuszustände und Tastaturnavigation helfen allen, es bequem zu verwenden.
- No-Code-Installation: Kopieren Sie den kleinen Code, fügen Sie ihn dort ein, wo Sie ihn benötigen – das war’s.
- Geringes Gewicht: Lädt schnell und bleibt unaufdringlich – selbst bei inhaltsreichen Seiten.
Editor öffnen und alle Funktionen testen – keine Registrierung erforderlich.
Wie man die Schaltfläche ‘Nach oben’ in HTML hinzufügt
Je nach gewünschtem Erscheinungsort des Buttons gibt es zwei einfache Wege.
Methode 1: Inline Zurück nach oben
Verwenden Sie dies, wenn der Button innerhalb Ihres Seiteninhalts platziert werden soll (z. B. nach einem langen Artikel).
- Vorlage auswählen: Öffne den Elfsight-Editor und wähle ein Layout, das dir gefällt.
- Stylen: Symbol, Farbe und Größe festlegen, dann Vorschau ansehen.
- Kopieren Sie den Installationscode: Klicken Sie auf Kostenlos zur Website hinzufügen, um Ihren Code-Schnipsel zu erhalten.
- <strong>HTML-Code einfügen:</strong> Fügen Sie das Snippet dort ein, wo der Button in Ihrem Seiten-Markup erscheinen soll.
Methode 2: Schwebendes Zurück nach oben
Ideal für einen feststehenden Button, der dem Leser beim Scrollen folgt.
- Wählen Sie das schwebende Layout: Im Editor wählen Sie einen schwebenden Stil aus.
- Position und Verhalten anpassen: Unter- und Rechtsabstand festlegen, Anzeigenwert nach dem Scrollen festlegen und sanftes Scrollen aktivieren.
- Installationscode kopieren: Sie erhalten ein kleines Skriptblock.
- Fügen Sie es vor dem schließenden
</body>-Tag ein: Der Button erscheint auf jeder Seite, auf der Sie das Snippet hinzufügen.
Brauchen Sie Hilfe? Besuchen Sie unser Hilfe-Center für detaillierte Schritt-für-Schritt-Anleitungen. Sie können Ideen in der Wunschliste teilen und Updates im Änderungsverlauf verfolgen.