Back to Top-Button – manuell mit jQuery umgesetzt

back to top

Bis vor Kurzem habe ich eine reine Html-Lösung hier im Blog verwendet, damit Besucher mit Klick auf den “Nach Oben-Button” schnell aus dem Footerbereich hoch scrollen können. Allerdings fand ich diese Lösung recht starr. Außerdem blieb man immer in der Mitte des Headers “hängen” und ein Teil davon blieb dadurch verdeckt.

Schöner fand ich es immer auf anderen Blogs, wenn bereits in der Mitte einer Seite ein Button erschien, mit dem ich wieder zum Headerbereich gelangen konnte.

Hierfür gibt es eine große Auswahl an Plugins bei WordPress.org. Einmal hier und hier. Allerdings dachte ich mir, so aufwändig dürfte ein manueller Einbau auch nicht sein und bin auf diesen Beitrag gestoßen.

Ich habe die Anleitung wie beschrieben angewendet und es funktioniert klasse! Eine kleine Änderung habe ich noch vorgenommen. Statt des Wertes ‘fast’ im Script verwende ich einen nummerischen Wert, den ich individuell – je nachdem, wie schnell die Seite scrollen soll – anpassen kann.

Da das Einrichten der Scrollfunktion in Englisch dokumentiert ist, möchte ich die wichtigsten Schritte, so wie ich sie durchgeführt habe, kurz noch einmal beschreiben.

Erstellen des Script-Datei

Mit Notepad++ legt ihr eine Datei namens “smoothscroll.js” an und fügt dieses Script ein:

jQuery(document).ready(function($){
	$(window).scroll(function(){
        if ($(this).scrollTop() < 200) {
			$('#smoothup') .fadeOut();
        } else {
			$('#smoothup') .fadeIn();
        }
    });
	$('#smoothup').on('click', function(){
		$('html, body').animate({scrollTop:0}, 400);
		return false;
		});
});

Anschließend wird diese Datei in das Verzeichnis “js” Eures Themes per FTP hochgeladen.  Sollte das Verzeichnis “js” nicht existieren sollte, müsst ihr ein solches anlegen.

Hinzufügen der Funktion

Anschließend ergänzt ihr die functions.php um folgenden Code:

//Back to top button
wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/js/smoothscroll.js', array( 'jquery' ), '',  true );

Aktivieren des Scroll-Links

Um Besuchern das Scrollen zu ermöglichen, fügt ihr in die footer.php Eures Themes folgenden Code ein:

<a href="#top" id="smoothup" title="Back to top" data-mce-href="#top"></a><br data-mce-bogus="1">

 

Gestalten des Back-to-Top-Links per CSS

Um die Position und das Aussehen zu bestimmen, habe ich folgende Werte in die style.css meines Themes Smoky vergeben. Diese müsst ihr in eurem Theme entsprechend anpassen. Allerdings habe ich die Rotations-Attribute weggelassen – irgendwie funktionierten die auf meinen Blogs nicht *:

#smoothup {height: 40px;width: 40px;position:fixed;bottom:50px;right:100px;text-indent:-9999px;display:none;background: url("images/gototop.png");-webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; transition-duration: 0.4s; }

gototop-ButtonIhr könnt dafür eine x-beliebige Grafik verwenden, ansonsten “klaut” sie einfach von mir. ;-)
Anders als im oben verklinkten Beitrag, habe ich diese nicht per Media-Uploader hinzugefügt, sondern per FTP in einen separaten Image-Ordner hochgeladen.

Ein zusätzlicher Kniff

Nachdem ich die Dokumentation Schritt für Schritt befolgt hatte, funktionierte der Scroll-to-Top-Button aber auf meinen Blogs noch nicht. Daher musste ich einen zusätzlichen Eingriff vornehmen, bis er dann doch sichtbar wurde: das Hinzufügen des smoothscroll-Scripts in die footer.php meines Themes:

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

Also ich finde die neue Scroll-Funktion und den Button total schick. Vielleicht ihr ja auch.

* Edit 18.12.2013

Für diejenigen von Euch, die Wert auf einen kleinen Gimmick in Form eines rotierenden Buttons legen, sobald man mit der Maus drüber fährt, habe ich ein geändertes CSS parat:

#smoothup {height: 40px;width: 40px;position:fixed;bottom:50px;right:100px;text-indent:-9999px;display:none;background: url("images/gototop.png");-webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; transition-duration: 0.4s; }
#smoothup:hover {rotate(360deg);-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);-webkit-transform: rotate(360deg) }
background: url('') no-repeat;}

Nun ist dieser Effekt auch im Firefox-Browser sichtbar.

Hinweis
Dieser Beitrag bezieht sich auf Codierungen oder/und Funktionen, die ich noch in meinem alten Template umgesetzt habe. Es ist möglich, dass sie in dem aktuellen Blog-Theme nicht übernommen wurden und somit die Darstellung bzw. Funktion nicht mehr existiert.

Die Autorin:

Sylvi

Meine Beiträge beinhalten eigene Erfahrungen über Soft- und Hardware, Social Media und die ich als WordPress-Bloggerin und Joomlanerin gesammelt habe. Zudem widme ich mich dem schönen Hobby "Fotografie".

14 Kommentare

  • Hallo Sylvi,

    normalerweise musst du den zusätzlichen “Kniff” nicht machen, wenn du
    wp_enqueue_script
    verwendest. Soweit ich weiß, muss der Aufruf aber innerhalb einer Funktion aufgerufen werden, die an eine bestimmte action gebunden ist:

    add_action('wp_enqueue_scripts', 'load_my_scripts');
    function load_my_scripts()
    {
    wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/js/smoothscroll.js', array( 'jquery' ), '', true );
    }

    Beste Grüße
    Stephan

    • Hej Stephan,

      danke für Deinen Tipp. Ich habe ihn umgesetzt – also Deinen Code statt des im Beitrag dokumentierten in die functions.php und den “Kniff” in der footer.php entfernt – und es funktioniert. :-D

      Lieben Gruß
      Sylvi

    • Danke schön Holger.

      Und ja, ich bin total froh, so tolle Kommentatoren unter meinen Besuchern zu haben, die durch ihre hilfreichen Tipps den Beiträgen noch die Krone aufsetzen. :-)

      Gruß Sylvi

  • Ich finde deinen Button sehr schick und auch dezent umgesetzt.

    Allerdings könntest du dir überlegen ihn doch etwas später einfliegen zu lassen. Bei mir erscheint er bereits wenn ich nur einige “cm” runtergescrollt habe und der Header fast noch sichtbar ist. Will man da wirklich schon wieder hoch?

    LG

    Silv aus Berlin

    • Hallo Silv,

      ja Du hast recht, das wollte ich noch ändern. :-)

      Nun habe ich den Wert in der Datei smoothscroll.js erhöht, so dass der Button beim Scrollen erst weiter unten erscheint:

      {if($(this).scrollTop()<1200)

      Vorher stand dort der Wert 200.

      Gruß Sylvi

  • hallo,

    kann man das noch irgendwie so machen das der langsam nach oben scrollt und nicht direkt oben ist ?

    • Hallo kelob,

      ja kann man, indem Du den Wert “400” in Zeile 10 erhöhst, zum Beispiel scrollt man mit diesem Code ganz langsam nach oben:

      jQuery(document).ready(function($){
      	$(window).scroll(function(){
              if ($(this).scrollTop() < 1200) {
      			$('#smoothup') .fadeOut();
              } else {
      			$('#smoothup') .fadeIn();
              }
          });
      	$('#smoothup').on('click', function(){
      		$('html, body').animate({scrollTop:0}, 2000);
      		return false;
      		});
      });

      Gruß Sylvi

  • dank dir für die anleitung. ich hab das gestern mal alles so eingebaut – allerdings hab ich das problem, dass wenn die seite neu lädt, der button am anfang direkt angezeigt wird. scrollt man dann runter, verschwindet er, bis er dann endlich wieder auftaucht (wenn er auftauchen soll). eine ahnung, wie ich verhindern kann, dass der button auch auftaucht, wenn die seite neu geladen ist (und man damit quasi bereits ganz oben ist)?

    wenn du selbst mal gucken willst: https://www.wihel.de/

    • Hallo Martin,

      ich habe mir sowohl Deine Seite als auch den Seitenquelltext angeschaut.

      Gestern Abend konnte ich laut Deiner Beschreibung ebenfalls sehen, dass der Button zwischendurch verschwindet. Hast Du in der Zwischenzeit noch etwas verändert? Denn jetzt wird er dauerhaft angezeigt.
      Allerdings erscheint heute zusätzlich zum Pfeilbutton ein Textbutton. Nach title="Back to top" steht der Text Back to top.
      Den würde ich entfernen.

      Außerdem scheint kurz nach diesem Eintrag ein abschließender div-Tag zu viel zu sein.

      Schau mal in meinen geänderten Code in Kommentar Nr. 7. Dadurch erscheint mein Button nun erst weiter unten.

      Gruß Sylvi

  • Hey Silvy,

    das Script ist ja wohl eines der geilsten, die ich in dieser Art gefunden habe. Ein Minimum an Javascript Code und CSS.
    Herzlichen Dank dafür.

    Funktioniert auch in Zusammenarbeit mit Xara Webdesigner ( Magix Webdesigner ) tadellos.

    Liebe Grüße,

    Kurt.

    • Hallo Kurt,

      das finde ich ja super, dass dieser Code nicht nur bei WordPress funktioniert.
      Danke für Dein Feedback. :-)

      Lieben Gruß
      Sylvi