*
Login-Header
blockHeaderEditIcon
Social-media-Header
blockHeaderEditIcon
Worldsoft-Logo
blockHeaderEditIcon
Worldsoft Logo
Menu
blockHeaderEditIcon

Anleitung Back-to-Top Button

Benötigt: Javascript, HTML und CSS.

Denn ganzen Code fügen sie bitte in einen Block ein. Dazu müssen sie einen neuen Block erstellen und dann unterdem Reiter „Quellcode“ denn ganzen Code einfügen.
(Beispiel finden sie auch auf dieser Seite wenn sie etwas nach unten scrollen)

Erklärung:

Struktur (HTML)

Der rot markierte Bereich ist für denn weissen Pfeil im Backtotop Button.
Der grüne Bereich definiert alles rundherum des Pfeils. Und ist elementar für das Javascript.

Die Verlinkung also href=“#“ muss zwingend ein Hashtag drin sein sonst funktioniert der Scroll Effekt vom Button nicht.

Der Titel ist nur dafür das wenn man mit der Maus kurze Zeit über denn Button fährt wird dieser Text denn man definiert hat im Titel wiedergegeben.
 

Struktur (CSS)

Der blau markierte Bereich ist ein Script das benötigt wird für den Pfeil. Das ist eine Datenbank mit vielen verschiedenen Icons die frei zur Verfügung stehen:
 

www.fortawesome.github.io/Font-Awesome/icons/
 

Das sind genau die gleichen Icons wo auch im Mega-Menu verwendet werden können.
Um eines dieser Icons zu verweden müssen sie auf dieser Website das gewwünschte Icon anklicken und den jeweils dargestellte Code verwenden.

Zu beachten ist auf dieser Website wird angegben das die Class mit einem „i“ Tag erstellt werden soll. Dieser „i“ Tag wird aber durch den Editor „WYSIWIG“ herausgelöscht. Deshalb verwenden Sie bitte einen „div“ tag wie im Beispiel des backtotop Button.

Der Vorteil gegenüber Bildern ist das Sie diese Icons via CSS steuern können. Mit einem Hover versehen damit die Farbe sich ändert, usw.
 

Erklärung der wichtigsten CSS Befehle für die Icons:
1 font-size:18px; definiert die Grösse des Icons
2 color:#fff; definiert die Farbe des Icons
3 background:#000; definiert den Hintergrund indem sich das Icons befindet
3 padding:15px; bildet den Innenabstand

Diese Icons können Sie auch für Buttons verwenden. Dazu finden Sie hier ein Tutorial: .........

Der braun markierte Bereich ist reines CSS. Hier können Sie Änderungen vornehmen wie Sie wollen.

Struktur (JS)

Im CSS können Sie verändern was Sie wollen das hat keinen Zusammenhang mit dem Javascript.
In den HTML Code wurde die ID „back-to-top“ vergeben. Diese ID finden Sie hier im roten Bereich vor. Wenn Sie die ID im HTML-Code abändern müssen Sie dies auch an diesen Stellen machen.

Der gelb markierte Bereich definiert wann der Button angezeigt werden soll. Wenn Sie die Website aufrufen wird der Button unten Rechts noch nicht angezeigt. Erst wenn man 100px runterscrollt wird dieser dargestellt. Also können Sie nach belieben diesen Wert anpassen.

Der blau markierte Bereich definiert die Geschwindkeit beim Hochscrollen sobald sie auf den Backtotop Button klicken.

Code-Download: Backtotop-Code
backtotop
blockHeaderEditIcon
Footer-06
blockHeaderEditIcon
Benutzername:
User-Login
Ihr E-Mail