Drucken
Zugriffe: 10173

Bewertung: 3 / 5

Stern aktivStern aktivStern aktivStern inaktivStern inaktiv
 

Hier habe ich ein kleines Plugin erstellt, welches einen Scroll to Top Button einblendet.

Die Scroll Funktion hat einen Smooth scroll Effekt, sowie eine zusätzliche Animation, welche aus CSS3 besteht. Der CSS3 Code für die Animationen ist eine freie Ressource von jomla51.com und wurde für den Scroll to Top Button modifiziert.

 Angabe der allgemeinen Daten

Im Backend können die Farbe, Größe und Icon festgelegt werden. Das Icon ist ein IONIC-ICON vom ionic-framework. Unter https://ionicframework.com/docs/v2/ionicons/ könnt Ihr Euch ein passendes Icon aussuchen und den Namen des Icon in das entsprechende Feld eintragen. Es gibt 3 verschiedene Größen (small, medium, large) zur Auswahl. Hier im Demo-Betrieb ist die Standard-Größe "medium" eingestellt. Bei den Farben kann ausgewählt werden zwischen "rot", "blau" und "gelb".

Neu ab Version 1.5.0

Die Version 1.5.0 ist eine Pre-Version für die Migration zu Joomla 4. Es hat einen neuen Namen bekommen, damit es unter Joomla 4 kompatibel ist. Der Code wurde komplett überarbeitet und das JQuery durch reines Javascript ersetzt.

Die Version 2.0.0 ist die Version für Joomla 4. Hier wurden die Dateien für die Fontawesome Icons entfernt, da diese im Core von Joomla 4 enthalten sind.

In beiden neuen Versionen kann zusätzlich ein Hintergrund mit Transparenz (RGBA), wie hier auf der Demo-Seite zu sehen, hinzugefügt werden. Wenn keine Farbe für den Hintergrund angegeben wird, dann ist dieser wie bisher transparent.

scroll2top.png scroll2top_with_fa-icon.png scroll2top_with_image2.png

scroll2top_with_ion-icon.png scroll2top_with_ion-icon_and_bg.png scroll2top_yellow.jpg

Das Plugin in Aktion

Schaut einfach auf dieser Seite unten rechts, wenn Ihr nach unten scrollt.