"Scroll to Top" mit Smooth-Scroll und Hover Effekt
Ein kleines simples, aber schickes Plugin für einen "Scroll to top", mit weichem Scroll-Effekt (Smooth-Scroll) und Hover Effekt, bestehend aus CSS3.
Die Animationen kommen ohne javascript aus, da die Effekte aus CSS3 bestehen. Der Stil des Buttons und das CSS Script ist eine freie Ressource von jomla51.com. Ich habe den Button lediglich in die "Scroll to Top" Funktion gepackt.
Basic Einstellungen
Das Plugin ist recht einfach gehalten, aber dennoch so, dass Ihr ihn an Eure Bedürfnisse anpassen könnt. Nach der Installation des Plugin enfach die gewünschten Einstellungen vornehmen und aktivieren.
- ION-Icon oder fa-Icon auswählen und eintragen
- Bild statt Icon
- Farbe des Button wählen (Hover Color)
- Größe des Button festlegen (small, medium, large)
- Abstand von rechts und unten festlegen
Icons für den Button
Das Icon im Button kann ein IONIC-ICON vom ionic-framework, fa-Icon oder ein Bild sein. Unter https://ionicframework.com/docs/v2/ionicons/ könnt Ihr Euch die passenden Ion-Icons aussuchen und den Namen des Icon in das entsprechende Feld eintragen.
Demo
Ein Demo könnt Ihr hier auf der Webseite sehen, wenn Ihr mit der Maus ein wenig herunter scrollt oder ruft unten eines der Demo-Seiten auf.