kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

»Scroll Back To Top«-Button mit jQuery

Der »zurück nach oben«-Button gehört zur Standard-Ausstattung einer modernen Website. In diesem Beitrag archiviere ich den Code um den Button herzustellen. Sobald der Anwender 100 Pixel nach unten gescrolled hat wird der Button eingeblendet. Wenn er zurück nach oben scrolled verschwindet der Button wieder. Ein Klick auf den Back-»Back To Top«-Button transportiert den User per animiertem Scrolling zurück ans obere Seitenende.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

JavaScript-Code(jQuery) für den »Back To Top«-Button

Folgendes JavaScript ist nötig um den Button zu erzeugen. Der Code ist mit Kommentaren dokumentiert.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script>
$(document).ready(function(){

	// Der Button wird mit JavaScript erzeugt und vor dem Ende des body eingebunden.
	var back_to_top_button = ['<a href="#top" class="back-to-top">Nach oben</a>'].join("");
	$("body").append(back_to_top_button)

	// Der Button wird ausgeblendet
	$(".back-to-top").hide();

	// Funktion für das Scroll-Verhalten
	$(function () {
		$(window).scroll(function () {
			if ($(this).scrollTop() > 100) { // Wenn 100 Pixel gescrolled wurde
				$('.back-to-top').fadeIn();
			} else {
				$('.back-to-top').fadeOut();
			}
		});

		$('.back-to-top').click(function () { // Klick auf den Button
			$('body,html').animate({
				scrollTop: 0
			}, 800);
			return false;
		});
	});

});
</script>

Demo anzeigen

Button mit CSS stylen

Mit folgendem CSS-Selektor könnt ihr den Button ansprechen und gestalten.



.back-to-top {
 background:red;
 position: fixed;
 bottom:20px;
 right:20px;
 padding:1em;
}

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

31 Kommentare

  1. Anja

    Verfasst am 12. August 2015 um 22:57 Uhr.

    Du hast einen Fehler für den Anwender gemacht. das Script funktioniert nur dann richtig, wenn man auch die Style-Info in das HTML-Dokumnet einsetzt:

    .back-to-top {
    background:red;
    position: fixed;
    bottom:20px;
    right:20px;
    padding:1em;
    }

    Das ist oben aber nicht gesagt worden bei dir. Sondern nur das Script wird angezeigt.

    Freundlichst
    Anja

    • Jonas Hellwig

      Verfasst am 13. August 2015 um 9:48 Uhr.

      Hallo Anja, der Button funktioniert auch ohne CSS, nur schwebt er dann nicht in der rechten unteren Ecke und hat keine Farbe etc. Ich habe dennoch den CSS-Selector ergänzt, wenn es die Sache vereinfacht.

  2. Frank

    Verfasst am 9. September 2015 um 11:03 Uhr.

    Hallo,

    Danke für das Tutorial…

    leider funktioniert die Demobei mir im FF nicht

    • Jonas Hellwig

      Verfasst am 10. September 2015 um 9:14 Uhr.

      Ich habe es soeben noch einmal getestet. Funktioniert bei mir im FF einwandfrei.

      • charismeki

        Verfasst am 22. März 2017 um 18:08 Uhr.

        Hi, funktioniert auch bei mir im ff nicht…

  3. Christian Zimmermann

    Verfasst am 21. September 2015 um 12:41 Uhr.

    super funktioniert astrein – Vielen Dank dafür!!!!
    Gibt es das auch für genau den umgekehrten Fall?
    Hintergrund: meine Bekannte möchte unbedingt ihre Navigation unten statt oben haben :-(
    auf einem Notebook oder Monitor ist das auch kein Problem, aber auf dem Tablet/Smatphone kommt es dann vor, dass man auf der Seite erstmal nach unten scrollen muss um die Navigation zu sehen.
    Als workaround könnte ich mir einen Butten vorstellen, der eingeblendet wird, wenn man X Pixel nach unten scrollen kann.
    Geht das irgendwie?
    Viele Grüße,
    Christian

    • Roman Tanner

      Verfasst am 13. Juni 2018 um 13:59 Uhr.

      Sag deiner Bekannten Ihre Website wird von den meisten Leuten bereits geschlossen sein bevor sie die Navigation finden…

  4. Frank

    Verfasst am 12. Oktober 2015 um 0:49 Uhr.

    funktiomier bei mir leider im FF auch nicht. :-(

  5. Markus

    Verfasst am 1. Januar 2016 um 18:20 Uhr.

    Danke für dieses Script.
    Habe es gerade eingebunden und es funktioniert (auch im aktuellen FF) wunderbar!

  6. Monti

    Verfasst am 17. März 2016 um 15:34 Uhr.

    Hi, gibt es bekannte Probleme diese Script in eine WordPress-Webseite einzubauen?
    Ich habe es versucht, doch ein sichtbarer Button erscheint leider nicht !! ;(

    Ich habe das JS vor dem Tag extern eingebunden, muss es evtl. direkt in die html-Datei eingebaut werden?

    Vielen Dank für schnelle Hilfe ;)

    • Monti

      Verfasst am 17. März 2016 um 15:35 Uhr.

      vor dem schließenden body-tag ^^ wurde offensichtlich rausgescriptet aus dem Kommentar

  7. Monti

    Verfasst am 17. März 2016 um 15:47 Uhr.

    Hinter $(„body“).append(back_to_top_button) fehlt ein Semikolon, wenn ich nicht irre…

    • Monti

      Verfasst am 17. März 2016 um 16:00 Uhr.

      Entschuldige bitte die vielen Beiträge… Spam war nicht mein Wunsch ;)
      Es klappt nun, ich hatte die jQuery 1.4.3 nicht eingebunden, da ich davon aus ging, daß er die jquery.js?ver=1.11.3 (die schon geladen wird) nimmt.

      Kannst du mir erklären, warum die ältere jQuery benötigt wird, oder ist es eine komplett andere Bibliothek?

  8. Martin

    Verfasst am 21. Juni 2016 um 9:55 Uhr.

    Danke für das Script, funktioniert super, auch auf dem iPhone. Statt dem Text Nach oben kann man ja auch eine Grafik einblenden lassen.

    • Nils Itjeshorst

      Verfasst am 22. Januar 2018 um 3:09 Uhr.

      Wie genau kann ich den Bilder oder Grafiken anstatt dem Text einblenden lassen? :)

  9. Christoph

    Verfasst am 20. Juli 2016 um 18:48 Uhr.

    Funktioniert bei mir hervorragend. Erfolgreich getestet in Chrome, Opera, Firefox und sogar IE. Vielen Dank dafür.

  10. Robin

    Verfasst am 27. Juli 2016 um 16:14 Uhr.

    Hat bei mir zuerst nicht geklappt, weiß jetzt aber warum und falls es bei anderen auch nicht klappt und ihr vielleicht dieselben Probleme habt, hier meine Probleme:

    Problem: Das $(window).scroll() feuert nicht.
    Ursache: html, body {height: 100%}
    Lösung: Ein .wrapper Element um den gesamten Content innerhalb von body platzieren und dann $(window) und $(‚body,html‘) durch $(‚.wrapper‘) ersetzen

    Problem: Das $(‚.back-to-top‘).click() feuert nicht.
    Ursache: Ein unsichtbares wrapper Element aus einer anderen Stelle im Dom lag über dem Button.
    Lösung: .back-to-top { z-index: 1000000; } Das genaue Z-Level variert je nach der Komplexität des DOMS und danach woher das überlapende Element herkommt, 100 hat bei mir gereicht. Aber umso höher umso sicherer überlagert er alle anderen Elemente.

  11. Rolf

    Verfasst am 29. August 2016 um 10:53 Uhr.

    Hallo, ich habe den Script „back to top“ auf meiner HP eingebaut und möchte mich dafür bedanken für die Bereitstellung und Erklärung auf eure Seite.

  12. Esther

    Verfasst am 27. September 2016 um 22:28 Uhr.

    Danke dir, funktioniert prima!

  13. gastrosoft

    Verfasst am 2. Januar 2017 um 23:17 Uhr.

    Hi, Danke für das Script!
    Funktioniert EINWANDFREI auch 2017 ;-)

    Gruss aus der Schweiz

  14. Peter F

    Verfasst am 19. Januar 2017 um 16:47 Uhr.

    Klasse, das ging auf Anhieb, ganz ohne Plugin.

  15. Stephan S.

    Verfasst am 20. Februar 2017 um 19:02 Uhr.

    Vielen Dank für das Skript, tolle Sache.

    Leider funktioniert die Demo im FF Vers.51.0.1 nicht, der rote Button wir nicht eingebelendet. Im IE 11 funktionieret es, aber im MS Edge leider auch nicht.

    Gruß

    Stephan

    • Stephan S.

      Verfasst am 23. Februar 2017 um 18:38 Uhr.

      Nachtrag:

      Das komische ist, dass auf dieser Hauptseite hier der Button rechts unten angezeigt wird, auch im FF 51.0.1

      Ist an diesem Skript, dass hier auf der Seite eingebaut ist, bis auf den CSS-Style, irgendetwas anders?

      Gruß

      Stephan

  16. Marcus

    Verfasst am 22. Juni 2017 um 17:06 Uhr.

    Die Demo funktioniert im aktuellen Chrome nicht.

    • Jonas Hellwig

      Verfasst am 23. Juni 2017 um 7:24 Uhr.

      Danke für den Hinweis. Der CDN von Google wurde abgeschaltet und somit kam jQuery nicht mit. Ist behoben.

  17. Frank Hempel

    Verfasst am 2. März 2018 um 10:48 Uhr.

    Moin,

    vielen Dank fpr das Script!

    Ich hab es im Themeverzeichnis im Ordner /js abgespeichert.

    Wenn ich es in der functions.php mit dem WordPress-jQuery einbinde, funktioniert’s nicht.
    Was mache ich falsch?

    wp_enqueue_script( ’scrolltop‘, get_template_directory_uri() . ‚/js/scrolltop.js‘, array(‚jquery‘), ‚1.0.0‘, true);

    Ein schönes Wochenende
    wünscht
    Frank

  18. Heike

    Verfasst am 7. März 2018 um 15:06 Uhr.

    Hallo,
    das Script funktioniert bei mir nicht unter https.
    Unter http, unter www und lokal unter xampp funktioniert es.
    Warum aber nicht direkt auf dem Server unter https?

    LG
    Heike

    • Jonas Hellwig

      Verfasst am 9. März 2018 um 9:19 Uhr.

      Dein jQuery wird aber über HTTPS korrekt geladen?

      • Heike

        Verfasst am 9. März 2018 um 9:42 Uhr.

        Ja, ich geh´ mal davon aus, denn alles andere über jQuery läuft.

        LG Heike

  19. Hannes

    Verfasst am 10. März 2018 um 10:40 Uhr.

    Hallo,

    lange gesucht und gefunden :) danke!

    Das Script funktioniert super auf den aktuellen Browsern Firefox, Firefox Developer, IE und Edge.
    In die CSS habe ich das z-index: 1000000; eingebaut. JQuery wird in der aktuellsten Version mit CDN mit Joomla geladen.

    Google Chrome zeigt leider nichts an. Vielleicht bekomme ich das auch noch irgendwann hin, weil die Demo hier funktioniert bei meinem Chrome.

    Aber nochmals: Vielen Dank für das Script.

    LG, Hannes

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.