Videotutorial with English subtitles
Suchen Sie nach einer Möglichkeit, den sogenannten Button „Nach oben„
auf allen Seiten Ihrer Webnode-Website zu platzieren?
In der Anleitung „So erstellen Sie einen Anker“ haben wir gezeigt, wie Sie einen Besucher an einen bestimmten Ort auf der Webseite umleiten (scrollen).
Der Anker kann auch als „Zum Seitenanfang Button“ verwendet werden, aber in diesem Tutorial zeigen wir eine elegantere Lösung des sogenannten.
1. Fügen Sie den obigen HTML-Code mit den Schaltflächen + und HTML in Ihre Webnode-Website ein. Fügen Sie den Code auf jeder Seite der Website ein, auf der die obere Schaltfläche angezeigt werden soll (unten auf der Seite).
TIPP: Sie können die Farbe der Schaltfläche im HTML-Code anpassen. In Zeile 28 können Sie die blaue Farbe einstellen, in Zeile 47 die rote Farbe der Schaltfläche „Nach oben„. (Nach dem Schweben der Maus namens On Hover). Hex-codes: https://htmlcolorcodes.com/
Fertig! …
Wenn Ihnen dieser Button gefällt, schreiben Sie uns einen Kommentar! 🙂
| <meta charset="utf-8"> | |
| <title>jQuery Tlačítko na začiatok by William from Wpromotions.eu</title> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | |
| <script type="text/javascript"> | |
| $(document).ready(function(){ | |
| $(window).scroll(function(){ | |
| if($(this).scrollTop() > 100){ | |
| $('#scroll').fadeIn(); | |
| }else{ | |
| $('#scroll').fadeOut(); | |
| } | |
| }); | |
| $('#scroll').click(function(){ | |
| $("html, body").animate({ scrollTop: 0 }, 600); | |
| return false; | |
| }); | |
| }); | |
| </script> | |
| <style type="text/css"> | |
| /* BackToTop button css */ | |
| #scroll { | |
| position:fixed; | |
| right:10px; | |
| bottom:80px; | |
| cursor:pointer; | |
| width:50px; | |
| height:50px; | |
| background-color:#3498db; | |
| text-indent:-9999px; | |
| display:none; | |
| -webkit-border-radius:5px; | |
| -moz-border-radius:5px; | |
| border-radius:5px; | |
| } | |
| #scroll span { | |
| position:absolute; | |
| top:50%; | |
| left:50%; | |
| margin-left:-8px; | |
| margin-top:-12px; | |
| height:0; | |
| width:0; | |
| border:8px solid transparent; | |
| border-bottom-color:#ffffff | |
| } | |
| #scroll:hover { | |
| background-color:#e74c3c; | |
| opacity:1; | |
| filter:"alpha(opacity=100)"; | |
| -ms-filter:"alpha(opacity=100)"; | |
| } | |
| </style> | |
| <a href="javascript:void(0);" id="scroll" title="Scroll to Top" style="display: none;">Top<span></span></a> |
Weitere tolle Tutorials
HTML Code für Weiterleitung (redirect)
Suchen Sie nach einer Möglichkeit, einen Besucher Ihrer Website automatisch auf eine andere Website umzuleiten? (URL) Die Lösung ist einfach: Bearbeiten und kopieren Sie den folgenden HTML-Code 🙂 1. Bearbeiten Sie die URL-Adresse im Code. Geben Sie als...
So fügen Sie Webnode-Websites KOSTENLOS einen Online-Chat hinzu!
Möchten Sie in Ihre Website Online-Chat einbinden, um schneller mit Ihren Kunden kommunizieren zu können? In dieser Anleitung zeigen wir Ihnen, wie Sie den HTML-Code eines Online-Chats einfach und gratis auf Ihrer Website einfügen können. 1. Der erste Schritt...
So verbinden Sie Ihre Website mit Facebook
Möchten Sie ein Widget in Ihre Website einbetten, um Ihre Website mit Facebook zu verbinden? Facebook-Widget Webnode ? Dann sind Sie hier richtig. In der Anleitung Wie man die Social-Media-Buttons (FB und Instagram) in die Kopfzeile der Website einfügt?...
Rechte Maustaste sperren
Rechte Maustaste sperren Möchten Sie verhindern, dass Inhalte von Ihrer Website kopiert werden? Mit diesem HTML-Code können Sie Besuchern die Nutzung der rechten Maustaste auf Ihre Website blockieren und so das Kopieren von Text verhindern. 1. Melden Sie...
Wie verbinde ich Google Kalender mit der Website?
Google Kalender - große Hilfe beim Zeitmanagement Google Kalender ist eine Onlinedienst zur privaten Terminverwaltung In diesem Tutorial erfahren Sie, wie Sie Google Kalender in Webnode-Websites einbetten. 1. Der erste Schritt besteht darin, ein Google-Konto zu...
Wie ändere ich die E-Mail im Kontaktformular bei Webnode?
Möchten Sie die E-Mail für Benachrichtigungen aus dem Kontaktformular ändern? Die E-Mail im Kontaktformularist auf die E-Mail voreingestellt, mit der Sie sich bei Webnode anmelden. Wenn Sie die E-Mail im Formular ändern möchten, folgen Sie dieser Anleitung: 1. Melden...
Wie man bei Webnode eine E-Mail und Telefonnummer verlinkt
Brauchen Sie einen klickbaren Link zu einer E-Mail oder Telefonnummer auf Ihre Website hinzufügen? E-Mail-Kommunikation ist eine schnelle, einfache und häufig verwendete Verbindung zwischen Ihnen und Ihren Kunden. Für die meisten potenziellen Kunden ist jedoch...
Wie man einen Anker erstellt
Video tutorial with English subtitles Der Anker funktioniert als Link innerhalb einer einzelnen Seite. Daher wird über den Link keine andere Seite (Website) angezeigt, sondern Sie gelangen an eine andere Stelle auf der Seite, der Sie gerade anschauen. Das Erstellen...
Ich habe das Portal Wpromotions.eu für Sie erstellt, um Ihnen bei der Erstellung Ihrer Website oder Ihres E-Shops zu helfen. Zögern Sie nicht, mich bei Bedarf zu kontaktieren, ich berate Sie gerne.
