Back to Top-Button – manuell mit jQuery umgesetzt

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

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