Idee

Sobald im Browserfenster nach unten gescrollt wird, wird ein Event ausgelöst. Es muss geprüft werden, wie weit bereits gescrollt wurde, falls noch überhaupt nicht nach unten gescrollt wurde, gibt ein Back-To-Top Button keinen Sinn und er sollte ausgeblendet werden. Sobald aber eine gewisse Weite (in Pixel) nach unten gescrollt wurde, muss der Back-To-Top Button wieder eingeblendet werden. Bei einem Klick auf diesen Button, muss dann das Fenster automatisch komplett nach oben gescrollt werden.

CSS

Wie der Button aussieht ist nicht wichtig und kann nach Belieben verändert werden. Die einzig wichtige Eigenschaft ist die Positionierung des Buttons. Für die Position muss unbedingt ein fixer Wert gewählt werden, da es ansonsten passieren kann, dass der Button zwar eingeblendet wird, aber das Ganze außerhalb des Sichtfeldes passiert.

	#back-to-top {
		position:fixed; /* Wichtig! */
		bottom:20px;
		left:100px;
		cursor:pointer;
		padding:10px;
		background:black;
		border-radius:2px;
		color:white;
     display:none;
	}

jQuery

Um die Funktionalität zu erhalten erstellen wir 2 Funktionen, die erste ist für die Überwachung der aktuell gescrollten Position zuständig, die andere für das Hochscrollen selbst. Sobald eine gewisse Tiefe nach unten gescrollt wurde (in diesem Beispiel 100px), wird der Button zum Hochscrollen automatisch eingeblendet. Sollte weniger als die Tiefe gescrollt werden, dann wird der Back-To-Top Button wieder ausgeblendet.

$(document).ready(function(){

	

	$(function () {
		$(window).scroll(function () {
			if ($(this).scrollTop() > 100) {
				$('#back-to-top').fadeIn();
			} else {
				$('#back-to-top').fadeOut();
			}
		});


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

});

Eine Demo der fertigen Version findet ihr unter http://demo.staticfloat.com/

Fallback

Mit einem Anker Tag könnte etwas ähnliches auch ohne Javascript realisieren. Der Nachteil dabei wäre aber, das es keinen fließenden Übergang mehr gäbe, sondern einfach zu dem Anker gesprungen würde.

<a name="top"></a>
.........
<a href="#top">Scroll-To-Top</a>