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

Einen Kommentar schreiben

Kommentar von Henning

Habs hinbekommen.
Ein bischen gegoogelt und hab dann etwas drumherum gebaut.
Jetzt funktioniert es.
Vielen Dank noch mal !!!

Kommentar von Henning

Meinst du im Template j_top_link ?

Antwort von Marco Dittmer

Ja, in der j_top_link.html5. Sollte dies jedoch auch nicht funktionieren, solltest Du den Tipp von Leo Feyer beachten. Problem bei der parrallelen Verwendung von jQuery und MooTools ist der Konflikt mit der $-Funktion. Diese wird bei beiden Sprachen verwendet. Daher wird empfohlen, folgende Snippets im jeweiligen Skript-Code zu verwenden:

// jQuery
(function($) {
  // Your code goes here
})(jQuery);

// MooTools
(function($) {
  // Your code goes here
})(document.id);

Ansonsten kannst Du ja auch mal nach "contao jquery mootools conflict" googeln.

Kommentar von Henning

Habe die Lösung gefunden. Nach dem ich MooTools deaktiviert habe, funktioniert es.
Aber wie bekomme ich es an laufen mit MooTools ?

Kommentar von Henning

Hallo Marco,
habe jetzt alles so gemacht, jedoch ist der Button immer sichtbar !
Die Geschwindigkeit des Scrollen kann man auch nicht ändern

Antwort von Marco Dittmer

Wie ich sehe hast Du neben jQuery auch MooTools aktiviert. Generell sollte man sich für eine der beiden Skriptsprachen entscheiden. Wenn Du beides verwenden möchtest, so baue bitte im jQuery-Skript direkt nach dem <script>-Tag folgende Zeile ein: jQuery.noConflict();

Kommentar von Henning

Auf meiner Testseite habe ich versucht den Top Link einzufügen. Er erscheint aber immer unten rechts in der Ecke und wird weder ein- noch ausgeblendet. Ach die Geschwindigkeit lässt sich nicht verändern.
Was habe ich falsch gemacht ?

Antwort von Marco Dittmer

Hallo Henning,

folgende Vorgehensweise haben wir bei unserem letzten Projekt umgesetzt:

  1. Modul "Eigener HTML-Code" mit folgendem Inhalt angelegt:
    <div class="top_link">
      <a href="{{env::request}}#top"><i class="fa fa-angle-up"></i></a>
    </div>
    Es wurde ein Icon von http://fortawesome.github.io/Font-Awesome/icons/ verwendet.
  2. Ein neues Template mit dem Namen j_top_link.html5 angelegt:
    <script>
      $(document).ready(function() {
        $('.top_link').hide();
        $(window).scroll(function(){
          var value = 200;
          var scrolling = $(window).scrollTop();
          if (scrolling > value) {
            $('.top_link').fadeIn();
          } else {
            $('.top_link').fadeOut();
          }
        });
        $('.top_link').click(function(){
        $('html, body').animate({scrollTop:'0px'}, 1000);
        return false;
      });
    });
    </script>
  3. Unter Seitenlayouts "Eingebundene Module" in der Fußzeile das Modul eingebunden und unter jQuery "jQuery laden" aktiviert und sodann j_top_link (global) ausgewählt und aktiviert.
  4. CSS-Style:
    #footer .top_link {
      bottom: 15px;
      position: fixed;
      right: 15px;
      z-index: 5;
    }
    #footer .top_link > a {
      background: #333;
      border-radius: 4px;
      color: #fff;
      display: block;
      font-size: 26px;
      font-size: 1.625rem;
      height: 35px;
      text-align: center;
      width: 35px;
    }
    #footer .top_link > a:hover {
      background: #ab0000;
    }

Wenn Du die Schritte genau so umsetzt, wird es funktionieren.

Kommentar von Monaco

Auch von mir ein großes Dankeschön für die Beschreibung.
Ich habe genau das selbe Problem, dass der top-link die ganze Zeit ganz unten am Footer fest klebt und nicht eingeblendet wird.
Wenn ich den link anklicke, wird die Seite nach oben gescrollt. Das funktioniert. Leider aber nicht das einblenden.
Verwende Contao 3.4.5

Antwort von Marco Dittmer

Hallo Monaco,

erstelle unter Layout > Templates eine neue "jQuery-Datei". Kopiere dazu beispielsweise die j_accordion.html5 in Deinen Templates-Ordner und benenne diese in j_toplink um. Dazu musst Du auf das Stiftsymbol klicken. Im Anschluss bearbeitest Du über das Zahnradsymbol den Inhalt der Datei. Lösche den gesamten Inhalt der Datei weg und füge den oben gezeigten Quellcode:

<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>

in die j_toplink.html5 ein. Speichere diese ab und wechsel über Layout > Themes > Ihr Theme > Seitenlayouts in Dein Seitenlayout. Sofern noch nicht geschehen aktiviere dort das Kontrollkästchen "jQuery laden". Als jQuery-Quelle bindest Du die lokale Datei ein. Unter den jQuery-Templates findest Du die angelegte j_toplink. Aktiviere auch diese über das Kontrollkästchen. Dies musst Du für alle Seitenlayouts durchführen.

Nun legst Du unter Layout > Themes > Module ein neues Modul mit dem Modultyp "Eigener HTML-Code" an. Füge dort folgenden Quellcode:

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

ein und speichere die Datei ab. Beachte auch, dass Dein DIV-Container die Klasse "nach_oben_link" aufweist. Denn die jQuery-Funktion greift auf diese Klasse zurück. Nun wechselst Du über Layout > Themes > Ihr Theme > Seitenlayouts wieder in Dein Seitenlayout und bindest das Modul unter "Eingebundene Module" in der Fußzeile ein.

Kommentar von Katja

Hallo, bei mir leider das gleiche Problem, auch auf verschiedenen Browsern... gibt es inzwischen eine Lösung?

Gruß,

Katja

Antwort von Marco Dittmer

Hallo Katja,

was genau ist denn das Problem?

Kommentar von Jürgen Olfen

Hallo Marco,

hat mir sehr weiter geholfen.

Man könnte natürlich den Code noch in eine Datei auslagern.

Gruß
Jürgen

Kommentar von Ditti

Vielen Dank,

so geht's.

Antwort von Marco Dittmer

Hallo Ditti,

ich habe mir das Ergebnis mal auf Deiner Webseite angesehen. Nun, das JavaScript scheint bei Dir ja noch nicht zu funktionieren. Auch solltest Du den Top-Link anders platzieren. Wenn Du einen Bildschirm hast, der von Deiner Auflösung abweicht, was ja bei den vielen verschiedenen Bildschirmen sehr wahrscheinlich ist, so rutscht der Top-Link mitten über den Webseiteninhalt.

Kommentar von Ditti

Hallo,

klicke ich auf "nach oben" findet contao die seite nicht.

Not Found

The requested URL /{ { env::request } } was not found on this server.
Apache Server at www.badkoesen-heilbad.de Port 80

Hat jemand einen Tipp für mich,

Danke

Antwort von Marco Dittmer

Hallo Ditti,

Zitat: "Damit der in das "href" eingefasste Inserttag korrekt ausgeführt wird, nehmen Sie bitte die beiden Leerzeichen zwischen den geschwungenen Klammern heraus."

Es ist erforderlich, dass Du jeweils die Leerzeichen vor den geschwungenen Klammern entfernst. Sobald ich diese jedoch im Quellcode-Schnipsel rausnehme, so wird dieser auch auf der Webseite aktiviert. Um dies zu umgehen, habe ich die Leerzeichen ergänzt.

Klicke einmal auf die Grafik zum "Contao: Modul anlegen", dann erkennst Du genau, wie Du den Quellcode im Modul anlegen musst.

Kommentar von Florian

Super vielen Dank.
Manchmal ist es so einfach. Danke

Kommentar von Florian

Hallo,
sorry das ich mich erst jetzt melde.
Aber meine Seite ist erst jetzt online gegangen.
Anbei der Link zur Website
Gruss

Antwort von Marco Dittmer

Hallo Florian,

die Umsetzung ist soweit schon ganz gut. Das JavaScript arbeitet so, wie es soll und der Pfeil-Nach-Oben wird erst ab der vorgegebenen Scrolltiefe eingeblendet. Einzig in Deiner Style-Sheet hast Du einige kleine Fehler.

Die Klasse .nach_oben_link weist folgende Eigenschaften für den Pfeil-Nach-Oben auf:

position: relative;
bottom: 50px;
left: 950px;

Ersetze diese bitte mit den folgenden Werten:

position: fixed;
bottom: 10px;
right: 10px;

Dadurch wird der Pfeil-Nach-Oben aus dem Fluss herausgenommen und am unteren Bildschirmrand (nicht am Seitenende) rechts-unten fixiert.

Kommentar von Florian

Hallo,

vielen Dank für das Tutorial.
Ich habe es mal nachgebaut unter Contao 3.0.6. Leider klebt der top-link die ganze Zeit ganz unten am Footer fest
und taucht nicht nach den angegebenen Pixeln auf. Was habe ich falsch gemacht?

Antwort von Marco Dittmer

Hallo Florian,

es scheint bei Dir Probleme mit JavaScript zu geben. Es stellt sich nun die Frage, ob es grundsätzlich nicht funktioniert oder ob es nur bei Dir im Browser nicht aktiviert ist. Rufe die Seite doch einmal mit einem anderen Browser auf und achte darauf, dass JavaScript nicht deaktiviert ist.

Gib doch mal kurz Deine Domain zur betreffenden Webseite an, dann schaue ich es mir mal an.