Smooth Scroll in Contao

(Kommentare: 0)

Ein Inhaltselement in Contao ist der Toplink, sehr praktisch. Man fügt dieses Elemant am Ende der Seite ein und hat einen schönen „nach-oben-link“.

Toplink Contao

Noch schöner wäre es natürlich, wenn der Link nach oben scrollen würde statt zu springen, dafür gibt es auch für Contao 4 eine Erweiterung (jquery-smooth-scroll). Allerdings habe ich dieses Plugin nicht zum Laufen gebracht. Also musste eine eigene Lösung her.

Im Seitenlayout habe ich jquery aktiviert (ohne weitere Templates) und dann in das Feld Eigener JavaScript-Code folgendes Script eingefügt:

<script>
$(".toplink").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
})
</script>

Damit das Script funktioniert, muss man noch das entsprechende Template bearbeiten. Unter Templates --> Neues Template --> ce_toplink.html5 auswählen und speichern. Dann in den Link die Klasse toplink eintragen.

Toplink CSS-KLasse

Nach Belieben und wenn das Theme solche Fonts unterstützt, kann man hier auch die globale Gestaltung des Toplinks bestimmen, z. B. durch das Einfügen eines Font-Awesome-Piktogramms (hier: <i class="fas fa-chevron-circle-up"></i> oder am Ende dieser Seite <i class="fas fa-sort-up"></i>). Alternativ wäre diese Gestaltung natürlich auch über CSS mit dem Pseudoelementen before oder after möglich.

Toplink in Contao

Viel Spaß damit.

Zurück

Einen Kommentar schreiben

Was ist die Summe aus 9 und 7?

Suchen im BLOG

Hinweis: In diesem Blog ist die Moderation von Kommentaren aktiviert. Es kann einen Moment dauern, bis der Kommentar veröffentlicht wird. Bitte den Kommentar nicht mehrmals absenden. Danke.