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:

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

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

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

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 🙂

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

Selametle

  • ismiistekmiş

    İsmim aslında Akif 😉 isteğimizi yerine getirdiğiniz için teşekkürler. Blogger için deniyeceğim.

WordPress gururla sunar.Theme: Flat by YoArts. WpAdamı Uyarlaması : Serkan Algur