Anker to Top Fade in/out beim scrollen

Oliver Götze

Verfasst am 24.03.2015

Update 15.04.2025

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

html

				<a id="top" name="top"></a>

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

html

				<div id="back-top"><a href="#top" title="top">nach oben</a></div>

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

javascript

				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.

css

				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;
}

Keine Likes

Hinterlasse doch ein Kommentar

Schreibe ein Kommentar zu Anker to Top Fade in/out beim scrollen

Wenn dir der Beitrag Anker to Top Fade in/out beim scrollen gefallen hat oder du Kritik bzw. Verbesserungsvorschläge hast, dann würde ich mich freuen, wenn Du ein Kommentar hinterlassen würdest.