Bootstrap styled jQuery Auto Scroll to Top Link – Tutorial

Dieser Beitrag zeigt eine einfache Möglichkeit einen mit Bootstrap stylebaren automatischen Scroll to Top Link zu generieren.

Zusätzlich wird es die Möglichkeit geben im Content Bereich der Website Links zu platzieren die ebenfalls an den Seitenanfang scrollen. Das Tutorial basiert auf den jQuery Plugin UItoTop von Matt Varone. Ich habe es ein wenig aufgebohrt um es flexibler zu machen. Es handelt sich um ein Standalone Plugin, ist also in keinster Weise auf Bootstrap angewiesen, alles hier gezeigte bezieht sich allerdings auf Bootstrap, sollte aber für jede andere Seite adaptierbar sein. Hier eine Vorschau:

Scroll to Top Demo

Schritt 1 - jQuery implementieren

Ladet euch die Datei scroll-top.js herunter. Sie beinhaltet bereits das Easing Plugin, um das Scrollen etwas effektvoller gestalten zu können. Das Plugin selbst ist auf Easing nicht angewiesen funktioniert also auch ohne dieses Zusatzplugin. Jetzt noch jQuery und scroll-top.js verlinken und initialisieren.

Schritt 2 - CSS Code

Zur Positionierung des automatischen Scroll to Top Links ist ein wenig CSS notwendig. Das folgende Schnipsel beinhaltet 3 CSS IDs, wobei jede für eine bestimmte Position steht, wie der Name erkennen lässt. Dieses Schnipsel in eure vorhandene CSS Datei einbinden und schon ist Scroll to Top einsatzfähig.

Einstellungen Autolink

Ab Zeile 5 der scroll-top.js findet ihr die Einstellungen für den automatisch generierten Scroll to Top Link. Im Grunde sollten die Einstellungen selbst erklärend sein, entsprechende Kommentare sind hinzugefügt. Über autoLinkPos lässt sich die Position des eingeblendeten Links steuern, dafür haben wir vorhin die 3 CSS IDs eingefügt. Im weiteren wird über autoLinkClass das Aussehen des Links festgelegt, hier ist die komplette Bootstrap Palette möglich. Im Demo wird dafür ein großer Button verwendet. Wenn keine Klasse gesetzt ist, wird auf die Bootstrap Formatierung eines normalen Links zurückgegriffen. Wie der Code Kommentar zeigt, bieten sich hier auch Bootstrap Badges oder Bootstrap Labels an. Über autoLinkText und autoLinkIcon wird der Inhalt des Links gesteuert. Es kann entweder Text oder Icon oder beides gesetzt werden. Eine Übersicht aller Bootstrap Icons sowie deren Verwendung findet ihr unter Bootstrap Glyphicons. Der easingType legt den Scrolleffekt fest. Solltet Ihr kein Easing benutzen wollen, könnt ihr das Easing Plugin auch aus der scroll-top.js löschen. Dann müsst ihr allerdings bei easingType einen der Standartwerte linear oder swing setzen. Der Wert min legt fest nach wieviel vertikal gescrollten Pixel der automatische Scroll to Top Link erscheinen soll. Das waren die wichtigsten Einstellungen.

Manueller Scroll to Top Link

Das setzen manueller Links ist im Grunde an jeder geeigneten Stelle im Code möglich. Auch beim Aussehen kann auf die komplette Bootstrap Palette zurückgegriffen werden. Wichtig dabei ist dem Link neben den Bootstrap Klassen auch die class=”top” zu übergeben. Nachfolgend die Linkbeispiele aus dem Demo.

Schreibe einen Kommentar

Share via
Copy link