Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

»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 100 Pixel nach unten gescrolled wurde, wird der Button eingeblendet. Wenn zurück nach oben scrolled wird verschwindet der Button wieder. Ein Klick auf den Back-»Back To Top«-Button transportiert den User per animiertem Scrolling zurück ans obere Seitenende.

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. Der rote Button ist ein Beispiel, damit das Styling leicht angepasst werden kann.

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

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 40 Kommentare

  1. MarcK
    schrieb am 24.02.2021 um 07:54 Uhr:

    Hallo Community!
    vielen Dank der Code funktioniert in einer Testseite von mir. Allerdings auf meiner Website ist die Laufleiste zum scrollen nicht am äußeren rechten Rand des Browsers, sondern diese Laufleiste ist wie meine Website zentriert am rechten Rand. Meine Website ist also nur halb so breit wie der Browser (Ich weiß nicht, wie ich das besser erklären soll). Wenn ich jetzt nach unten scrolle kommt nicht der Scrollback-Button, wahrscheinlich weil sich nicht die gesamte Seite bewegt, sondern nur der innere Teil der Seite. Auch das ist nur eine Vermutung, ob es wirklich daran liegt, oder ich den Code von der Testseite in die Aktive Website falsch eingebaut habe, weiß ich leider nicht. Wahrscheinlich muss ich dem Scrollback-Button nur erklären, dass er erscheinen soll, wenn sich der innere Teil der Website bewegt und alles andere statisch bleibt. Ich weiß nur nicht wie. Könnt ihr mir bitte helfen? Hat jemand einen Tipp für mich? Vielen Dank im Voraus.
    Viele liebe Grüße
    MarcK

    Antworten
  2. Rotsch
    schrieb am 27.10.2020 um 04:19 Uhr:

    Hat bei mir wunderbar geklappt.
    Vielen Dank.

    Wer lokal (C:) entwickelt – bzw. momentan nicht online ist – der muss (wenn jquery.min.js via http eingebunden ist) eine Internetverbindung herstellen. Offline funktioniert das Script logischerweise nicht.

    Alternativ kann man sich jquery.min.js oder jquery.js herunterladen (die Version mit .min hat alle Zeilenumbrüche entfernt, die ohne .min kann man besser lesen).

    So könnt ihr jquery herunterladen und bspw. in einen Ordner „meinVerzeichnis/html5/jquery/1.4.3/jquery.min.js“ tun (oder besser eine aktuellere Version als 1.4.3) und diese einbinden.

    Also bei src=“http://ajax…“ http://ajax… ersetzen durch meinVerzeichnis/…


    Frage:
    Ich will nicht den Text „nach oben“ haben, weil zu viel Platz wegnimmt, sondern suche nach dem HTML-Zeichen für das Exponent-Zeichen (das Dächchen, so als „Pfeil“ nach oben zu entfremden). Habe es aber nicht gefunden. Wie machen die bei Bootstrap/Wordpress das? Ist wahrscheinlich ein Icon?

    Antworten
    • Rotsch
      schrieb am 28.10.2020 um 20:32 Uhr:

      Habe jquery 3.5.1 lokal installiert und eingebunden (da kann man ja schnell auf die jquery-Homepage surfen und schauen welches die aktuelle Version ist). Bei mir ist dies projekt_root/html5/jquery/3.5.1/jquery.min.js. Dann funktioniert es auch offline.

      Habe den Text „nach oben“ durch dieses HTML-Zeichen ersetzt: ↑ (& uarr ;).

      Antworten
  3. peter
    schrieb am 10.10.2019 um 22:12 Uhr:

    Danke für das Script.

    Bei mir gibt einen Fehler.
    Der back-to-top button funktioniert ganz gut.
    Nur wird unten re. ein zweiter angezeigt.
    im Seitenquelltext ist alles ok. Kein Fehler zu sehen.
    Beim Element untersuchen wird eben der Zweite angezeigt, unter dem Script.

    Woran kann das liegen?

    Antworten
  4. Baltarsar
    schrieb am 25.06.2019 um 21:32 Uhr:

    Funktioniert einwandfrei. Auch im Firefox und auch im Opera.
    Eine Sache möchte und muss ich allerdings kritisieren:

    Die jquery Bibliothek baut bei jedem Aufruf der Seite eine Verbindung zu Google auf um sie abzurufen. Dies ist mit der DSGVO nicht mehr vereinbar und auch vermeidbar, in dem man sich die Bibliothek auf seinem eigenen Webspace oder Server speichert und dann entsprechend verlinkt.

    Dabei sollte darauf geachtet werden, dass eine aktuelle jquery Bibliothek verwendet wird und nach Möglichkeit ohne Angabe einer Versionsnummer, um es Angreifern nicht ganz so leicht zu machen.

    Die hier verwendete Version 1.4.3 ist seit JAHREN veraltet und weist sicherheitsrelevante Lücken auf, die es Angreifern erlauben Schadcode einzupflegen. Mittlerweile ist die Version 3.4.1. released und sollte verwendet werden, da sie die bekannten Sicherheitslücken geschlossen hat.

    Ansonsten, ein solides Script, das in den modernen Browsern funktioniert. Vorausgesetzt man hat nicht noch eine Browserversion von 1839, weil man sie nie aktualisiert. ;)

    CSS und Script ist soweit anpassbar, damit man auch eine Grafik (z.B. einen Pfeil) einbinden kann. Dazu beim Script den Bereich Nach oben wie folgt abgeändert

    Im CSS kann man nun den absolut hässlichen background komplett rausnehmen. Wer bitte kommt auf die Idee, dafür einen roten Hintergrund zu verwenden? Da ist Augenkrebs vorprogrammiert und die Lust am scrollen auf einer Webseite vergeht einem komplett.

    Verwende das Script selbst auf meiner Webseite, da es zu denen zählt, die sich mit den anderen Scripten auf meiner Seite verträgt.

    Antworten
    • Jonas Hellwig
      schrieb am 22.07.2019 um 14:48 Uhr:

      Hallo Baltarsar, vielen Dank für deinen Kommentar.

      • Die Einbindung von jQuery muss nicht über Google stattfinden, sondern auch ein anderes CDN wäre möglich. Im Zusammenhang mit WordPress kann auch die jQuery-Version von WP genutzt werden.
      • Die Verschleierung der Versionsnummer bringt kaum etwas
      • Die Gestaltung des Beispiels ist bewusst so gewählt, dass man die Optik leicht anpassen kann …
      Antworten
  5. Jannis
    schrieb am 07.01.2019 um 21:50 Uhr:

    Wie bekomme ich einen eigenen (oder diesen von deiner Seite :) ) eingebunden?
    Habe das Css mit dem roten eckigen Button, aber das sieht ja nicht toll aus.
    Wie setze ich dort ein anderen Button ein?

    Antworten
  6. Tom
    schrieb am 18.08.2018 um 01:03 Uhr:

    @Heike 9. März 2018 um 9:42 Uhr

    Wenn Du im JavaScript-Code (jQuery) den Link änderst und https anstelle http verwendest, dann funktionert es – zumindest bei mir hat es dann geklappt.

    Anstatt http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js

    verwendest Du also

    https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js

    Sonst nämlich blockieren manche Browser die „unsicheren“ Inhalte der Seite.

    VG
    Tom

    Antworten
  7. Hannes
    schrieb am 10.03.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

    Antworten
  8. Heike
    schrieb am 07.03.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

    Antworten
    • Jonas Hellwig
      schrieb am 09.03.2018 um 09:19 Uhr:

      Dein jQuery wird aber über HTTPS korrekt geladen?

      Antworten
      • Heike
        schrieb am 09.03.2018 um 09:42 Uhr:

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

        LG Heike

  9. Frank Hempel
    schrieb am 02.03.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

    Antworten
  10. Marcus
    schrieb am 22.06.2017 um 17:06 Uhr:

    Die Demo funktioniert im aktuellen Chrome nicht.

    Antworten
    • Jonas Hellwig
      schrieb am 23.06.2017 um 07:24 Uhr:

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

      Antworten
  11. Stephan S.
    schrieb am 20.02.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

    Antworten
    • Stephan S.
      schrieb am 23.02.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

      Antworten
  12. Peter F
    schrieb am 19.01.2017 um 16:47 Uhr:

    Klasse, das ging auf Anhieb, ganz ohne Plugin.

    Antworten
  13. gastrosoft
    schrieb am 02.01.2017 um 23:17 Uhr:

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

    Gruss aus der Schweiz

    Antworten
  14. Esther
    schrieb am 27.09.2016 um 22:28 Uhr:

    Danke dir, funktioniert prima!

    Antworten
  15. Rolf
    schrieb am 29.08.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.

    Antworten
  16. Robin
    schrieb am 27.07.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.

    Antworten
  17. Christoph
    schrieb am 20.07.2016 um 18:48 Uhr:

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

    Antworten
  18. Martin
    schrieb am 21.06.2016 um 09: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.

    Antworten
    • Nils Itjeshorst
      schrieb am 22.01.2018 um 03:09 Uhr:

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

      Antworten
      • Jonas Hellwig
        schrieb am 23.01.2018 um 10:54 Uhr:

        Hallo Nils, du kannst einfach einen CSS Background mit Bild einfügen.

  19. Monti
    schrieb am 17.03.2016 um 15:47 Uhr:

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

    Antworten
    • Monti
      schrieb am 17.03.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?

      Antworten
  20. Monti
    schrieb am 17.03.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 ;)

    Antworten
    • Monti
      schrieb am 17.03.2016 um 15:35 Uhr:

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

      Antworten
  21. Markus
    schrieb am 01.01.2016 um 18:20 Uhr:

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

    Antworten
  22. Frank
    schrieb am 12.10.2015 um 00:49 Uhr:

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

    Antworten
  23. Christian Zimmermann
    schrieb am 21.09.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

    Antworten
    • Roman Tanner
      schrieb am 13.06.2018 um 13:59 Uhr:

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

      Antworten
  24. Frank
    schrieb am 09.09.2015 um 11:03 Uhr:

    Hallo,

    Danke für das Tutorial…

    leider funktioniert die Demobei mir im FF nicht

    Antworten
    • Jonas Hellwig
      schrieb am 10.09.2015 um 09:14 Uhr:

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

      Antworten
      • charismeki
        schrieb am 22.03.2017 um 18:08 Uhr:

        Hi, funktioniert auch bei mir im ff nicht…

  25. Anja
    schrieb am 12.08.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

    Antworten
    • Jonas Hellwig
      schrieb am 13.08.2015 um 09: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.

      Antworten
      • Beat Dietschweiler
        schrieb am 28.11.2019 um 16:48 Uhr:

        Hallo Jonas, es ist mal Zeit danke zu sagen für all die guten Artikel und Hilfen von Dir. Danke von meiner Seite her! Betreffend vorliegendem Artikel ist es vielleicht sinnvoll, noch den z-Index beim CSS einzufügen. Ich habe den Button zuerst auch vergeblich gesucht. ;-)
        css: z-index: 1000;

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →