AnimateScroll ile “Yukarı” butonu yapmak…

Dün yazdığım yazıya yorum olarak ilginç bir istek geldi :) İsmim istek adıyla yorumunu bırakan arkadaş sitemde bulunan bir özelliği paylaşmamı istemiş. “kullandığınız yukarı çık butonunu paylaşır mısınız?” yorumunu görüp onayladığımda yolda bir yere doğru gitmekteydim. Butona gerekli efekti verirken neler yaptığımı anlatayım dedim.

Butonun efekt için AnimateScroll olarak bilinen bir jQuery eklentisini kullanıyorum. Buton şekli şemali için az birşey dokunulmuş bootstrap butonlarını kullanıyorum. Animatescroll’u kullanmak oldukça kolay. Hatta kendi sayfasından da (şu sayfa) bilgi edinebilirsiniz.

Buton

Buton bildiğiniz basit bir link te olabilir, herhangi bir buton da. Benim kullandığım buton basit olarak aslında şu:

<a href="#" class="scrollup"> Yukarı </a>

Sonrasında ben sağ alanda belli yükseklikten sonra görünmesi için şu kodu javascript kodlarım arasına ekliyorum.

	var aboveHeighti = 200; //sayfada kaç px aşağı inildiğinde gösterilsin?
	$(window).scroll(function(){
		if ($(window).scrollTop() > aboveHeighti){
			$('.scrollup').fadeIn();
		} else {
			$('.scrollup').fadeOut();
		}
	});

Ve en önemlisi, butona yada linke tıklanınca yapılacak olan işlem;

        $('.scrollup').click(function(){
            $("html, body").animatescroll({scrollSpeed:3000,easing:'easeInBounce'});
            return false;
        });

En son animate scroll’u jQuery sonrasında çağırıp kodlarıma ekliyorum.

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="http://siteniz.com/kodun-bulundugu-yol/animatescroll.js">

Bu arada verdiğim easing efekti yukarı çıkarken efekti vermiş oluyor. Tabii bu arada stil (css) dosyanıza şu kodu eklemeyi unutmayın. Sonra buton neden gizlenmiyor dersiniz :)

.scrollup{opacity:0.9;position:fixed;bottom:50px;right:20px;display:none;}

AnimateScroll’u şuradan indirebilirsiniz;
AnimateScroll - jQuery Plugin for Animating Scroll

Selametle