oxo888oxo: Back-to-Top-Button Script ohne JQuery

Beitrag lesen

Hallo

Ich habe mich entschlossen, einen so genannten Back-to-Top-Button auf meiner Website einzubauen. Ich habe das nun erstmal mittels eines JQuery-Scripts realisiert. Das ganze funktionier auch prime (Desktop und Mobil).

Nun ist es aber so, dass ich JQuery nur für diese eine einzige Sache nutze. Und da dachte ich, dass ist doch sicher etwas oversized :) Gigt es diese Back-to-Top-Button Funktiuon aus JQuery auch separat? Also ohne den ganzen restlichen "Ballast", den ich ja garnicht anwende.

Über Hilfe/Ratschläge von Euch würde ich mich sehr freuen.

Hier das, was ich da zur Zeit einsetze:

<script type="text/javascript" src="http://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"><img  src="/bilder/back-to-top-button.gif"></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() > 500) { // Wenn 1000 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>

<style>
.back-to-top {
 position: fixed;
 bottom:5px;
 right:0px;
}
</style>