»Scroll Back To Top«-Button mit jQuery
Von: Jonas Ein»Back To Top«-Button führt per Klick vom unteren Ende einer Website zurück nach oben. Mit jQuery ist ein solcher Button schnell eingebaut.
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="https://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>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;
}
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
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?
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 ;).
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?
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.
Hallo Baltarsar, vielen Dank für deinen Kommentar.
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?
@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
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
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
Dein jQuery wird aber über HTTPS korrekt geladen?
Ja, ich geh´ mal davon aus, denn alles andere über jQuery läuft.
LG Heike
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
Die Demo funktioniert im aktuellen Chrome nicht.
Danke für den Hinweis. Der CDN von Google wurde abgeschaltet und somit kam jQuery nicht mit. Ist behoben.
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
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
Klasse, das ging auf Anhieb, ganz ohne Plugin.
Hi, Danke für das Script!
Funktioniert EINWANDFREI auch 2017 ;-)
Gruss aus der Schweiz
Danke dir, funktioniert prima!
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.
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.
Funktioniert bei mir hervorragend. Erfolgreich getestet in Chrome, Opera, Firefox und sogar IE. Vielen Dank dafür.
Danke für das Script, funktioniert super, auch auf dem iPhone. Statt dem Text Nach oben kann man ja auch eine Grafik einblenden lassen.
Wie genau kann ich den Bilder oder Grafiken anstatt dem Text einblenden lassen? :)
Hallo Nils, du kannst einfach einen CSS Background mit Bild einfügen.
Hinter $(„body“).append(back_to_top_button) fehlt ein Semikolon, wenn ich nicht irre…
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?
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 ;)
vor dem schließenden body-tag ^^ wurde offensichtlich rausgescriptet aus dem Kommentar
Danke für dieses Script.
Habe es gerade eingebunden und es funktioniert (auch im aktuellen FF) wunderbar!
funktiomier bei mir leider im FF auch nicht. :-(
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
Sag deiner Bekannten Ihre Website wird von den meisten Leuten bereits geschlossen sein bevor sie die Navigation finden…
Hallo,
Danke für das Tutorial…
leider funktioniert die Demobei mir im FF nicht
Ich habe es soeben noch einmal getestet. Funktioniert bei mir im FF einwandfrei.
Hi, funktioniert auch bei mir im ff nicht…
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
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.
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;