Tutorial: Bootstrap styled jQuery Auto Scroll to Top Link


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

Schritt 1

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

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.

Hinweis in eigener Sache!
Das Script ist meine persönliche Lösung, ich erhebe keinen Anspruch darauf, dass diese auch die Beste ist. Änderungen, Verbesserungen und Optimierungen am Script sind ausdrücklich erlaubt. Die Benutzung des Scriptes erfolgt auf eigene Gefahr. Für eventuelle Schäden, die durch den Einsatz bzw. die Nutzung des Scriptes entstehen, übernehme ich keine Haftung.
28.03.2013 Autor: Rico Loschke Kategorie: Bootstrap 2



9 Antworten zu “Tutorial: Bootstrap styled jQuery Auto Scroll to Top Link”

  1. Alex sagt:

    Hi,

    super Sache allerdings bekomm ich den Button bei Bootstrap 3 nicht rechts sondern links unten eingeblendet und find den Fehler nicht

    • sevenx sagt:

      Hast du den CSS Schnipsel auch eingefügt und bei die Default Werte entsprechend angepasst?
      autoLinkPos: 'toTop-right', //toTop-left, toTop-center

      Bootstrap 3 sollte an der Funktion nichts ändern, weil das Plugin quasi autark arbeitet und sich Bootstrap nur des Style wegens bedient.

  2. Alex sagt:

    Habe die Anleitung abgearbeitet und es mit der Demo verglichen und habe keinen Unterschied drin und trotzdem klappt es nicht.

    Hab es bei auroLinkPos mit allen 3 Varianten versucht – macht keinen Unterschied

    Bin da echt ratlos

  3. Gabriel sagt:

    Ganz cool – allerdings sollte man sich wenn man Bootstrap verwendet auch die Standards halten:

    – CSS nur mit Klassen und nicht IDs
    – In CSS kein camelCase sondern mit bindestrich getrennte Namen verwenden
    – Eigenschaften Zusammenfassen (wie bei Bootstrap mit .btn .btn-primary etc)

    http://git.io/Zyvj0g

    • sevenx sagt:

      Du hast in allen Punkten recht! Das passiert halt, wenn man CSS aus einem bestehenden Plugin nimmt und es auf die eigenen Bedürfnisse anpasst ohne über eine Optimierung nachzudenken. Allerdings basiert das Scroll Plugin darauf, dass es sich zur Positionierung die angegebene ID sucht, mit verketteten Class Selector dürfte es zu Fehlern kommen. Die Definition von IDs zur Positionierung ist daher die lösungsorientierte Variante ohne dass ich auch den jQuery Code des Plugins anpassen muss.

  4. Godmog sagt:

    Find ich eine super Sache und ist genau das, was ich für mein Projekt suche. Allerdings scheitere ich bei der Integration des Codes in Typo3 (mit Bootstrap). Wäre für jede Hilfe äußerst dankbar!

  5. Kenan sagt:

    Hi,

    also erstmal sehr gute Lösung,
    Hat mir sehr geholfen.

    Aber ich hab Probleme damit das Icon einzufügen. Ich hab alles eingebaut von deinen code schnipseln. Brauch ich jetzt nur noch den Namen des Icon bei Autolinkicon einzugeben? Denn das hab ich schon versucht. Nur der Linktext erscheint, auch wenn ich den Text entferne erscheint kein icon..
    Muss ich irgendwas auf mein Server hochladen? Irgendeine Datei oder so.. hatte mit bootstrap noch nichts zutun.

    Freue mich auf eine Antwort.

  6. Erik sagt:

    Danke! Hab zuerst irgendwas viel zu kompliziertes versucht, das hat perfekt und schnell geklappt!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.