Scroll to Top Button programmieren

11

Gerade auf Webseiten mit sehr großen Seiten oder Blogs mit vielen Artikeln pro Seite, kommt es oft vor, dass man sehr weit nach unten scrollen muss. Um dann wieder nach oben zu gelangen, um beispielsweise auf die Navgation zugreifen zu können, muss man die ganze Seite manuell hochscrollen, was auf Dauer alles andere als komfortabel ist. Die Lösung für dieses Problem stellt ein “Scroll to Top-Button” dar, der am Rand der Webseite angezeigt wird und die Seite automatisch nach oben scrollt, sobald man auf ihn klickt.

Ein Beispiel für einen solchen Button sehen Sie auf meiner Website. Sobald Sie ein Stück nach unten scrollen, erscheint in der unteren rechten Ecke ein Button. Klicken Sie darauf, scrollt die Seite automatisch ganz nach oben und der Button wird wieder ausgeblendet.

Realisieren lässt sich ein solcher Button recht einfach mithilfe von Javascript. Unten sehen Sie ein entsprechendes Skript, das innerhalb einer Funktion überprüft, ob die Seite vertikal weiter als 100 Pixel nach unten gescrollt ist. Ist das der Fall, wird der Button langsam eingeblendet. Sobald die Seite weniger als 100 Pixel nach unten gescrollt ist, wird der Button ausgeblendet.
Beim Klick auf den Button wird die gesamte Seite mithilfe der “animate”-Funktion über einen Zeitraum von 800 Millisekunden nach oben gescrollt.

// Smooth scroll to top
$(document).ready(function(){
	
	// Fade in scroll button
	$(function(){
		$(window).scroll(function(){
			if ($(this).scrollTop() > 100){
				$('#back-top').fadeIn();
			} else{
				$('#back-top').fadeOut();
			}
		});

		// Scroll body to top on click
		$('#back-top a').click(function(){
			$('body,html').animate({
				scrollTop: 0
			}, 800);
			return false;
		});
	});
	
});

Das HTML für den Button ist ebenfalls sehr einfach gehalten. Es werden lediglich ein div-Container und ein Link benötigt. Fügen Sie den Code an beliebiger Stelle in die Seite ein.

<div id="back-top">
	<a href="#top" title="<?php _e('Scroll to top', 'lbprojects'); ?>">&uarr;</a>
</div>

Den Pfeil &uarr; habe ich an dieser Stelle lediglich als Platzhalter eingefügt. Auf meiner Seite befindet sich an dieser Stelle ein Font-Icon. Nähere Informationen zu diesem Thema finden Sie hier. Sie können natürlich auch ein Hintergrundbild verwenden, das Sie über die CSS Background-Eigenschaft einbinden.

In meinem Fall sieht das CSS für den Button wie folgt aus.

#back-top {
	position: fixed;
	bottom: 30px;
	right: 20px;
	z-index: 3;
	display: none;
}

#back-top a {
	width: 40px;
	height: 40px;
	display: block;
	text-align: center;
	font-size: 25px;
	color: #fff;
	background-color: #33363b;	
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;	
	transition: background-color .15s;
	-moz-transition: background-color .15s;
	-webkit-transition: background-color .15s;
	-o-transition: background-color .15s;
	-ms-transition: background-color .15s;
}

#back-top a:hover {
	text-decoration: none;
	background-color: #555;
}

Alles in allem ist ein solcher Button sehr schnell und einfach in eine Seite eingebaut und stellt eine sinnvolle Funktion dar, die den Bedienkomfort der Seite deutlich verbessern kann.

Hinterlasse eine Antwort

Ihre Email-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert.

*

Kommentare umschalten

11 Kommentare zu "Scroll to Top Button programmieren"

  • Armin sagt:

    Hallo,

    vielen Dank für den Code. Funktioniert bis auf ein kleines Leck einwandfrei. Wenn ich den back-top Button gedrückt habe und wieder zum Anfang springe lässt sich die Seite garnicht mehr scrollen. Weiß jemand warum?

    Viele Grüße Armin

  • Daniel sagt:

    Hallo,
    reicht es aus die Codes (JavaScript, HTML und CSS) in meine Seite einzubinden und es funktioniert? Oder brauche ich dazu noch jQuery oder anderes?
    Vielen Dank!!!

    • Lukas Bommes sagt:

      Hallo Daniel,
      du benötigst noch die jQuery-Library, die du ganz konventionell im HTML-Header oder (im Falle einer WordPress-Website) separat mithilfe der entsprechenden Enqueuing-Funktionen in der functions.php einbinden musst.
      Grüße
      Lukas

  • Marc .H sagt:

    Wie bau ich das ganze in meine WP ein? (Ich bin noch nich ganz zufrieden damit deswegen ist sie noch offline…)

  • Dirk sagt:

    Hallo,
    danke für die Anleitung :)

    Allerdings habe cih das Problem, dass der “Button” bereits dann erschein, wenn die Seite aufgerufen wird.
    Dies ist ja bei Dir hier nicht so der Fall.

    Sobald ich die Seite dann aber kurz bewege, wird der Button unsichtbar und erscheint erst dann auch wieder (wie eingestellt) nach 200px – sprich es funktioniert soweit super, bis auf die Tatsache, dass er schon beim Aufrufen der Seite angezeigt wird, obwohl noch gar nciht nach unten gescrollt wurde.

    Was kann ich dagege noch tun?

    Gruß Dirk

  • Mike sagt:

    Moin, funktioniert bestens wenn ich das Semikolon hinter den zweitletzten Klammern weglasse.

    Mein Frage, muss das JS direkt in den Quelltext, oder kann es auch ausgelagert werden in ein JS Datei, die dann im head der HTML Seite verknüpft wird.

  • Lilli❤ sagt:

    Hey,
    leider funktioniert der Code bei mir nicht… ich habe ihn in den Head eingebaut, ist das richtig so? Versuche es jetzt nochmal anders…
    Ansonsten Dankeschön dafür und weißt du, wo ich den HTML-Code für einen Button “nach unten” finden kann?

    Schau doch mal auf meiner Seite vorbei: all-over-mystery.jimdo.com

    LG Lilli❤

    • Lukas Bommes sagt:

      Hallo Lilli,

      du musst zunächst einmal die jQuery-Library einbinden. Dazu musst du im HTML-Head den Code:

      einfügen. Darunter fügst du dann innerhalb der Tags den jQuery-Code von oben ein.

      Jetzt kannst du an beliebiger Stelle im HTML-body den obigen HTML-Code für den Button einfügen.
      Den CSS-Code fügst du ebenfalls im HTML-header zwischen die Tags

      ein.

      Jetzt sollte es theoretisch :D funktionieren.
      Falls nicht, sag einfach nochmal Bescheid. Dann kann das eigentlich nur daran liegen, dass der Code irgendwo falsch eingebunden ist.
      Ich gebe zu, meine Anleitung ist in der Hinsicht auch etwas verbesserungsbedürftig.

      Und deine Seite habe ich mir gerade mal angeguckt. Sieht echt schon sehr gut aus. Weiter so! :)

      Lukas

      • Katja sagt:

        Lustig das immer nur codes geworfen werden ohne genaue Anleitungen. Welche jQuery-Library einbinden (es gibt mehrere), wohin welche codes (als script, als .js oder was sonst auch immer…usw.

        Die Anleitung ist halbfertig und für Laien nicht nutzbar. Profis brauchen die nicht, die wissen eh wie das geht.

        Liebe Grüße

        • Lukas Bommes sagt:

          Hallo Katja,

          danke für dein Feedback. Ich weiß selbst, dass die Verständlichkeit mancher vergangenen Beiträge nicht unbedingt auf allzu hohem Niveau ist, allerdings habe ich sie damals teilweise als Gedächtnisstützen für mich selbst erstellt. Mittlerweile würde ich (sofern ich denn die Zeit hätte), natürlich etwas anders vorgehen. Dennoch danke für deine Anmerkung dazu!

          Am besten einfach mal bei Google nach anderen Anleitungen suchen, dort wirst du sicher fündig. Ich habe es ja damals auch nach einer solchen Anleitung programmiert.

          Viele Grüße
          Lukas

  • Michaela sagt:

    Hallo!
    Ich hätte auch gerne solche Buttons, aber ich versteh nur Bahnhof. Was muss wo eingefügt werden?
    Danke für die Hilfe!
    LG Micha