Anker to Top Fade in/out beim scrollen

Ein einfaches Script, welches langsam zum Seitenanfang scrollt. Zudem wird der nach oben Button erst angezeigt, wenn man anfängt nach unten zu scrollen.

Als erstes muss am Seitenanfang ein Anker in Quellcode gesetzt werden

Anschließend muss ein Link in den Footer gesetzt werden, der beim Klick zum Seitenanfang scrollt.

Dies funktioniert bereits jetzt schon auch ohne Javascript. Möchte man jedoch eine schöne Animation, so benötigt man Javascript.

Langsames scrollen zum Seitenanfang mit jQuery

jQuery(document).ready(function(){
	// hide #back-top first
	jQuery("#back-top").hide();
	
	// fade in #back-top
	jQuery(function () {
		jQuery(window).scroll(function () {
			if (jQuery(this).scrollTop() > 100) {
				jQuery('#back-top').fadeIn();
			} else {
				jQuery('#back-top').fadeOut();
			}
		});

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

Dieser Code sollte am besten in den Footer eingefügt werden. Wenn der Javascript Code eingefügt wurde kann der Anker sogar entfernt werden, denn das Script scrollt automatisch zum Seitenanfang.

Um den Button immer anzeigen zu lassen muss er nur noch fixed positioniert werden. Kopiert einfach die Styles in eure .css Datei und passt Sie euren Bedürfnissen an.

div#back-top {
	z-index: 999;
	position: fixed;
	right: 30px;
	bottom: 30px;
	width: 100px;
	height: 100px;
	line-height: 100px;
	text-align: center;
	background: #fe5f55;
	display: block;
}
div#back-top a {
	width: 100%;
	height: 100%;
	display: block;
	color: #fff;
	text-transform: uppercase;
	text-decoration: none;
}

oliver Ich heisse Oli und komme aus dem wuseligen Berlin. Meine Leidenschaft für Webseiten hält seit mehr 10 Jahren an. Dabei ist es egal ob ich kleinere oder größere Projekte umsetze - ich hänge mich in jedes Projekt mit voller Leidenschaft rein und versuche mich dabei immer wieder neu zu entdecken und neue Ideen umzusetzen.

Hinterlasse ein Kommentar

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.