Contao Top-Link Button beim Scrollen einbinden

Binden Sie einen Top-Link-Button für Ihre Contao-Webseite ein und ersparen Sie Ihrem Webseitenbesucher elend langes scrollen auf langen Webseiten.

Wir erstellen mobile Webseiten mit Contao

Binden als Betreiber einer Contao-Webseite einen Top-Link Button auf Ihrer Webseite ein.

Machen Sie Schluss mit ewigem nach oben scrollen und binden Sie einen benutzerfreundlichen Top-Link Button auf Ihrer Webseite ein. Sobald Ihr Besucher auf der Seite nach unten scrollt, blendet dank jQuery an bestimmter Position sanft ein Button ein, auf dessen klicken die Seite ebenfalls ganz sanft wieder zum Seitenanfang nach oben scrollt. Am Beispiel des Contao Content Management Systems zeigen wir Ihnen, wie Sie ganz einfach einen solchen Button auch auf Ihrer Webseite einbinden können.

Ein Modul in Contao anlegen

Loggen Sie sich im Backend von Contao ein (www.domain.tld/contao/) und navigieren Sie unter den Backend-Modulen zum Layout > Themes > Ihr Theme > Module und legen Sie mit Klick auf „Neues Modul“ ein neues Modul an.

Contao: Modul anlegen
Contao: Modul anlegen

Tragen Sie einen für Sie aussagekräftigen Titel ein. Als Modultyp wählen Sie dann in der Drop-Down-Auswahl den Typen „Eigener HTML-Code“ aus. Unter „Text/HTML“ tragen Sie dann als HTML-Code folgenden Quellcode ein:

<div class="nach_oben_link">
  <a href="{{env::request}}#top">nach oben</a>
</div>

Um Ihren Top-Link Button über eine externe CSS-Stylesheet optisch anzupassen, vergeben Sie die Klasse nach_oben_link. Darüber können Sie dann den DIV-Container gezielt ansprechen.

Modul in das Seitenlayout einbinden

Gehen Sie als nächstes im Backend-Modulen über Layout > Themes > Ihr Theme > Seitenlayouts zum Seitenlayout und binden Sie dort das angelegte Modul unter „Frontend-Module“ > „Eingebundene Module“ in der Fußzeile Ihres Layouts ein.

Contao: Eingebundene Module
Contao: Eingebundene Module

jQuery im Seitenlayout aktivieren

Ebenfalls in dem Seitenlayout aktivieren Sie die jQuery-Funktionen. Dazu setzen Sie unter „jQuery“ den Haken bei „jQuery laden“ und wählen eine Quelle für die jQuery aus.

Contao: jQuery aktivieren
Contao: jQuery aktivieren

Eigenen JavaScript-Code in das Seitenlayout einbinden

Nun muss noch der JavaScript-Code für das gewünschte Einblenden und nach oben scrollen des Top-Link Buttons in das Seitenlayout eingebunden werden. Dazu wird unter „Skript-Einstellungen“ der nachfolgende Script-Code in das Feld „Eigener JavaScript-Code“ eingetragen. Anschließend speichern Sie die gemachten Änderungen am Seitenlayout.

<script>
$(document).ready(function() {
  $('div.nach_oben_link').hide();
  $(window).scroll(function(){
    var value = 200;
    var scrolling = $(window).scrollTop();
    if (scrolling > value) {
      $('div.nach_oben_link').fadeIn();
    } else {
      $('div.nach_oben_link').fadeOut();
    }
  });
  $('div.nach_oben_link').click(function(){
    $('html, body').animate({scrollTop:'0px'}, 1000);
    return false;
  });
});
</script>

Mit dem Wert var value = 200; bestimmen Sie, ab wie vielen gescrollten Pixeln der Top-Link Button eingeblendet werden soll. In unserem Beispiel beträgt es 200 Pixel. Die Scrollgeschwindigkeit, mit der die Seite zum Seitenanfang sliden soll, bestimmen Sie mit dem Wert .animate({scrollTop: '0px' }, 1000); des Skriptes. In unserem Beispiel beträgt dieser 1.000. Je kleiner der Wert, desto schneller scrollt die Seite nach oben, je größer der Wert, desto langsamer die Scrollgeschwindigkeit.

Zu guter Letzt den Top-Link Button mittels CSS-Style nach eigenen Belieben stylen.

Zum Schluss müssen Sie nur noch den Top-Link Button nach Ihren Belieben stylen. Dazu können Sie diesen wie bereits erwähnt über die Klasse nach_oben_link in Ihrer CSS-Datei gezielt ansprechen.

Hat Ihnen der Artikel aus unserer Contao-Blog-Reihe gefallen? Dann teilen Sie diesen bitte!

13 Kommentare Artikel vom von Marco Dittmer