Smoothscroll ist besonders bei OnePage-Weseiten sehr beliebt – um ehrlich zu sein wirkt ein Onepager ohne entsprechenden Effekt auch nicht sonderlich hochwertig. 😉 Um smoothscroll in Contao einzubinden, muss man wie folgt vorgehen:
1. Seitenlayout öffnen
2. jquery aktivieren
3. im <head> Bereich folgenden Code einfügen:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') [&][&] location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, '1000', 'swing'); return false; } } }); }); |
Und schon scrollt die Webseite flüssig. Die Einbindung eines extra Skriptes ist nicht notwendig.
Die Optik des Effekts kann mit den fett markierten Werten angepasst werden. Die ‚1000‘ steht hier für die Animationsdauer in ms, ’swing‘ ist der Animationseffekt. Da hier allerdings nur auf den jquery core zurück gegriffen wird, sind nur ‚linear‘ und ’swing‘ verfügbar. Wer mehr Effekte wünscht, müsste zusätzlich JQUery UI einbinden.