Jquery ile hazırlanmış yukarı çık aşağı in butonları ekleyin

Blog’unuza eklediğiniz bir kaç parça kod sayesinde ,yukarı çık/aşağı in gibi butonları tasarımıza sabitleyerek , blog ziyaretçilerinizin sayfayı tek tıklama ile yukarıya veya aşağı doğru kaydırabilmelerini kolaylaştırabilirsiniz. 

nternette bir çok örneğini bulabileceğiniz bu uygulamanın kodlarını bir kez blog’unuza ekledikten sonra biraz HTML ve CSS bilgisi ile kendi tasarımınıza uyarlayabilir ,yeni fonksiyonlarda ekleyebilirsiniz. 
Uygulamayı hemen test edebilmek için jquery uygulamalarini tanitti[imiz bloga bakmanizyeterli ,kendi blog’unuz da kullanmak içinse aşağıda bir gadget sizi bekliyor . 

 
Uygulamayı blog’unuza ekledikten sonra özelleştirme işlemlerine geçmeden önce önemli bir konuya kısaca değinmek istiyorum yazımızın başında belirtiğimiz gibi uygulamamız Jquerykütüphanesini kullanmatadır bu şu anlama gelir yukarıdaki kodları ekledikten sonra biraz incelerseniz javascirpt kodlarında şöyle bir kod satırı bulunmaktadır 

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js?ver=1.6.1'></script>

bu kod jquery’nin ana kodudur eklediğiniz diğer eklentileri çalıştıran bu kod şuan halen geliştirme aşamasında olduğu için sürekli güncellenmektedir .. siz daha önce bu kodun 
1.5.1/  , 1.4.1/ ,1.3.1/  versiyonlarından her hangi birisini blog’unuza eklediyseniz yukarıda bulunan ana kodu tekrar eklemenize gerek yok , o yüzden o kodu silin yoksa eklentinizin çalışmamasına sebep olabilir. 

Eklentiyi kendinize göre özelleştirin.

Eklentimiz iki düğmeden oluşmakta siz bu düğmelerin yerine farklı düğmeler kullanmak isterseniz  yapmanız gereken bulduğunuz görselleri her hangi bir yere yükledikten sonra linkini alıp CSS kodlarında bulunan  maviyle renklendirilmiş olan linklerle değiştirmek. 

<style> 
a#scrlBotm{ 
background:transparent url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/32x32/rnd_br_down.png) no-repeat top left; 
            position:fixed; 
            bottom:5px; 
right:5px;             width:32px; 
            height:32px; 
        } 
  a#scrlTop{ 
background:transparent url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/32x32/rnd_br_up.png) no-repeat top left; 
            position:fixed; 
            bottom:40px; 
right:5px;             width:32px; 
            height:32px; 
        } 
</style>

Farklı ikonlar bulmak için İconfinder sitesinde kısa bir arama yapmanız yeterli olacaktır. 
İkonların sağda değil de solda görünmesini isterseniz yine CSS kodlarında kırmızı ile renklendirdiğim right yerine left yazın. 

Düğmelere tıklanıldığın da sayfanın daha hızlı veya daha yavaş kaydırılmasını istiyorsanız javascript kodlarında bulunan kırmızı ile renklendirdiğim 1500 değeriyle oynamanız yeterli. 

<script language='javascript' type='text/javascript'> 
         $(function () { 
             $(&#39;#scrlBotm&#39;).click(function () { 
                 $(&#39;html, body&#39;).animate({ 
                     scrollTop: $(document).height() 
                 }, 
1500); 
                 return false; 
             }); 
             $(&#39;#scrlTop&#39;).click(function () { 
                 $(&#39;html, body&#39;).animate({ 
                     scrollTop: &#39;0px&#39; 
                 }, 
1500); 
                 return false; 
             }); 
         }); 
    </script>

Sayfanın daha yavaş kaydırılmasını istiyorsanız 1500'ü yükseltmeniz gerekir daha hızlı kaydırılması içinse değeri düşürmeniz gerekir.