Kommentare 28

Back-to-Top Buttons mit Smooth Scroll und Fading in WordPress verwenden

Besonders auf langen Webseiten und Blogs sind Back-to-Top Buttons recht nützliche, kleine Helfer. So müssen sich deine Besucher nach dem Lesen eines längeren Artikels nicht wieder mühselig hochscrollen, sondern können mit dem Top-Button bequem zum Seitenanfang gelangen. Besonders benutzerfreundlich sind Buttons mit einer Smooth Scroll-Funktion, da der Nutzer so mitverfolgen kann wohin er durch Klicken des Buttons geleitet wird. Auch Buttons, die sich erst beim Herunterscrollen einblenden werden immer beliebter. Hier erfährst du, wie du einen Back-to-Top Button mit Smooth Scroll und Fading auf deiner WordPress-Seite integrieren kannst.

1. Back-to-Top Button in WordPress integrieren

1.1. Top-Button mit Smooth Scroll, ohne Fading

Da die Smooth Scroll-Funktion mit jQuery funktioniert, musst du als erstes jQuery in deiner WordPress header.php Datei aufrufen (falls du dies nicht schon getan hast).

Dazu kannst du folgenden Code in die header.php Datei deines Themes einfügen:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Dieser Code-Schnipsel ruft jQuery von der Google Libraries API auf.

Im nächsten Schritt legst du eine neue JavaScript-Datei (z.B. mit dem Namen Custom) in deinem Editor an, und fügst diesen Code ein:

// Smooth Scroll to Top
$(document).ready(function() {
    $('a[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) {
                var targetOffset = $target.offset().top;
                $('html,body').animate({scrollTop: targetOffset}, 700);
                return false;
            }
        }
    });
});

Diese legst du am besten in deinem Theme-Order in einen neuen js-Ordner an. Jetzt rufst du diese Datei ebenfalls in der header.php Datei auf.

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/custom.js"></script>

Jetzt kannst du deinen Back-to-Top Button mit einem ganz normalen anchor-tag und CSS-Styling gestalten.

<a href="#header">Back to Top</a>

Die einfachste Möglichkeit, um den Button an den Seitenanfang zu leiten ist, wenn du auf die ID deines obersten Divs linkst. So musst du keinen »leeren« Link erstellen.

1.2. Smooth Scroll Back-to-Top Button mit Fading

David Walsh stellt auf seinem Blog ein tolles jQuery toplink-Plugin vor. Mit Hilfe des Codes kannst du dir einen Button einrichten, der erst beim Herunterscrollen der Seite einfadet. Hier kannst du dir eine Demo des Buttons anschauen.

Eine ausführliche Beschreibung zum Plugin-Code findest du in diesem Blog-Artikel von David Walsh.

1.3. Dynamic to Top WordPress-Plugin

Falls dir Fade-In Effekt gut gefällt, du aber nicht selbst den Code in den Theme integrieren möchtest, kannst du auch das praktische Dynamic-to-top WordPress-Plugin verwenden. Das Plugin bietet die Möglichkeit einen Text- oder Imagelink zu erstellen. Den Button kannst du auch noch selbst mit Hilfe von CSS anpassen.

Back to Top Button in WordPress
So sieht der Standard-Button des Plugins aus.

Back to Top Button in WordPress
Die Plugin-Optionen ermöglichen eine einfache Anpassung des Buttons.

Möchtest du ein eigenes Image für deinen Button verwenden, kannst du im Plugin-Ordner unter CSS / img das Standard-Image des Buttons austauschen. Auch die Css-Datei im Ordner CSS kannst du den Button z.B. in der Größe anpassen.

Back to Top Button in WordPress
Du kannst den Standard-Button an dein Theme-Layout anpassen.

Um deine individuellen Styles nicht zu bei einem Plugin-Update zu verlieren, ist es sinnvoll die CSS-Styles in deine Theme style.css Datei einzufügen, und das Button-Image in deinen image Ordner (vergiss dabei nicht, den Pfad des Button-Image im CSS anzupassen).

2. Back-to-Top Button Inspirationen

Um dich zu inspirieren, und auf neue Ideen für die Gestaltung von Back-to-Top Buttons zu bringen, habe ich einige schöne und neuartige Top-Buttons mit unterschiedlichen Features zusammen gestellt.

Icelab

Back to Top Button in WordPress
Der Back-to-Top ist mittig im Footer platziert, auf alle Fälle ein Design-Erlebnis und bestimmt nicht zu übersehen.

Tahoe Tech Talk 2010

Back to Top Button in WordPress
Da die Webseite von Tahoe Tech Talk sehr lang ist, kommt dieser hilfreiche Button mit Fading-Effekt sehr gelegen.

David Hellmann

Back to Top Button in WordPress
Ein echter Hingucker ist auch dieser mittig platzierte, kreative Back-to-Top Button von David Hellmann.

Armitage

Back to Top Button in WordPress
Eine innovative Design-Idee ist auch der mitten im Footer platzierte Top-Button mit Smooth Scroll.

Paul Benett

Back to Top Button in WordPress
Auf der Webseite von Paul Benett gibt es gleich mehrere Back-to-Top Button, diese faden sich ein, je nachdem wo man sich auf der Seite gerade befindet.

Hull digital Live 10

Back to Top Button in WordPress
Die Webseite der HDLive Konferenz hat einen sehr ästhetischen, runden Back-to-Top Button.

Drexler

Back to Top Button in WordPress
Eine grafische und innovative Lösung ist auch der Top-Button auf der Webseite von Dexler.

Wie gefallen die die animierten Back-to-Top Buttons? Kennst du weitere praktische Möglichkeiten den Button auf der eigenen Webseite zu integrieren, oder Bespiele besonders kreativ gestalteter Back-to-Top Buttons? Über dein Feedback und weitere Tipps freue ich mich sehr!

28 Kommentare

    • Hallo Jürgen,

      vielen Dank für dein tolles Feedback. Es freut uns sehr, dass du die Tipps hier auf dem Blog hilfreich findest. Und der Back-to-Top Button auf deiner Testseite funktioniert ja super :-)

      Hehe, da gibt es ja einen richtigen Kubi-Fanclub, ich bin auch immer faul, und lasse mich mit Kubi gemeinsam hochbeamen ;-)

      Viele Grüße,
      Ellen

  1. Ellen, vielen lieben Dank, für diesen Artikel. Basic Minds hat nun auch so einen kleinen Freund. Ganz angenehm die Dinger ;-) Ich habe mich für die Plugin-Variante von Matt Varone entschieden. Ist aber auch nervig, dass ewige scrollen.

    Beste Grüße

    Tobi

    • Hallo David,

      vielen Dank für deinen Kommentar. Ich finde deinen neuen Back-to-Top Button super schön, und das Redesign deiner Seite ist sowieso genial. Du hast dir so viel Mühe bei den Details gegeben, echt toll :-)

      Ja, stimmt, und besonders auf Blogs mit langen Start- oder Artikelseiten ist ein Back-to-Top Button auch so viel praktischer :-)

      Viele Grüße,
      Ellen

    • Hallo Patrick,

      vielen herzlichen Dank für dein Feedback :-) Freut mich, dass dir der Back-to-Top Button Tipp gefällt. Ja, das WP-Plugin ist echt hilfreich. So hat man mit ein paar Klicks einen schicken Top-Button erstellt :-)

      Viele Grüße,
      Ellen

  2. Hallo Ellen,

    vielen Dank für diesen Artikel. Das back-to-top-button-wordpress-plugin *Kettenwortkonstruktionen galore!* funktioniert super. Danke für den Tipp & Eure wirklich informative und inspirierende Arbeit!

    Viele Grüße,
    Julia

    • Hallo Julia,

      herzlichen Dank für dein Feedback. Es freut mich sehr, dass dir der Artikel und der Plugin-Tipp gefallen :-)

      Hehe, ich habe mich während des Artikel Schreibens auch zig mal beim Wort “Back-to-Top Button…” vertippt ;-)

      Viele Grüße,
      Ellen

    • Hallo Chris,

      vielen Dank für dein nettes Feedback. Es freut mich sehr, dass dich mein Tipp gleich zur Umsetzung auf deiner eigenen Seite inspiriert hat.

      Wow, dein Theme sieht echt klasse aus! Ist ja genial, was du aus Nick Las Vorlage gemacht hast. Ich glaube so eine coole Theme-Umgestaltung habe ich noch nie gesehen, und der Back-to-Top Button macht sich natürlich auch super schick :-)

      Viele Grüße,
      Ellen

  3. Hallo Ellen,
    dank Deiner Anleitung habe ich es geschafft, dass Beanie mit ihrem Ballon in den Himmel schwebt. Ich habe mich für den Top-Button mit Smooth Scroll ohne Fading entschieden.

    Danke und viele Grüße
    Nicole

  4. Christopher

    Herzlichen Dank für den Artikel. Habe vor kurzem erst dieses Blog gefunden und muss sagen, dass dies genau meine Vorstellung eines Webdesigner und WordPress Blogs trifft welches ich schon seit längerem gesuchht habe.

    Ich nutze übrigens auch seit neustem das Theme Ari für meinen Blog und bin damit mehr als zufrieden.
    Danke und Grüße
    Christopher

  5. detlef

    hallo,

    sehr interessiert bin ich auf deinen seiten unterwegs und freue mich über die wertvollen hinweise und tipps.
    leider funktioniert das sanfte scrollen bei mir überhaupt nicht.
    welche möglichkeiten gibt es, eventuelle fehler zu finden?
    wordpress 3.2 (auf localhost), alles nach obiger anleitung eingerichtet.
    nach wie vor springt die seite nach oben, aber scrollt nicht.

    über hilfe würde ich mich freuen!

    • detlef

      achja, eins habe ich geändert:
      ich lade die jquery-bilbliothek nicht von “tante google” (die muss nicht alles wissen…!), sonder habe mir die aktuelle version heruntergeladen und ziehe sie vom eingenen verzeichnis.

  6. detlef

    jetzt funktioniert es.
    ich hatte die dateien von einem eigenen js-verzeichnis in einem child-theme-verzeichnis laden wollen.
    das ging gar nicht.
    pfad hatte ich geprüft, war gültig.
    drauf gekommen war ich im firefox durch extras > web-developer > informationen > javascript anzeigen

    da wurde als title-tag “nothing found…” angegeben.
    deshalb habe ich die dateien versuchsweise in das originale verzeichnis “js” des eltern-themes verlagert und die pfadangabe in der einbindung wieder auf original geändert und schwupp:
    jetzt geht es.

    ist trotzdem blöd.
    ich lege gern für sachen, die nicht zum original-umfang von wp gehören eigene verzeichnisse an und lade von dort.

    hier scheint das nicht zu funktiinieren.
    weshalb das nicht geht, weiß ich nicht. dazu fehlen mir die kenntnisse.

    vielleicht kannst du hier einen rat geben?

    ciao,
    detlef

  7. Mike

    Hallo, kann mir evtl. jemand sagen wie dieses tolle Script mit funktioniert? Ich würde gern das meine Webseite automatisch beim Seitenaufruf ein stück sanft herunterscrollt =) Vielen Dank falls das hier jemand liest!

Schreibe eine Antwort