WordPress geniş kapsamlı bir sistem ve bu yüzden de çok tercih ediliyor.Her gün yeni yeni şeyler eklenen ve yeni eklentiler geliştirilen WordPress’te daha bir çok şeyi yapmak mümkün.Bunlardan birisi ise “Scroll Top” yani “Sayfanın Üstüne Dön” imajı.Bunu ben gezdiğim bir çok sitede gördüm ve biraz kaynak kodlarını araştırdım.Gördüğüm sitelerin tamamında bu WordPress Scroll to Top eklentisi ile yapılmıştı.Bunu birazcık geniş kapsamlı düşündüm ve “ben bunu nasıl yapabilirim?” dedim.Sonunda yaptım ve bu bilgimi size videolu olarak anlattım.
Scroll to Top’ı yapabilmemiz için öncelikle jQuery dosyamızı sayfamıza çağırıyoruz.Ben videoda daha önceden çağırdığım için çağırmadım ancak siz mutlaka çağırın.Takip edenlerin bildiği gibi bu işlemi 2 farklı şekilde yapıyorduk.1.’si jQuery’nin kendi sitesinden çağırmak için kullandığımız
<script></script>
koduydu 2. ise benimde kullandığım Google jQuery kodu yani
<script></script>
skodu.Bu kod çağırma işlemlerimizi gerçekleştirdikten sonra isterseniz kendimize önce bir resim bulalım.
Scroll Resmi Bulma
İnternette bir sürü “icon” siteleri mevcut ancak ben genellikle icon bulmak için iconfinder.com‘u kullanıyorum ve işimede yarıyor.Herhangi bir icon sitesinin arama(search) kısmına “scroll” ifadesini yazdığımız zaman karşımıza çok fazla scroll resmi gelir ve birini seçip tema klasörümüze atalım.
Scroll’un göreneceği yeri belirleme
Scroll’un görüneceği yerin çok fazla bir önemi olduğunu düşünmüyorum çünkü zaten CSS kodlarını yazarken “position” değerini düzenleyeceğimiz için istediğiniz yere ekleyebilirsiniz.Ben videoda index.php’de gösterdim bunu.
Scroll’un görünmesi gereken yere
/Resim dizini" alt="yukarıya Çık" />Kodunu ekliyoruz ve son işlem olarak jQuery’sini yazarak tamamlıyoruz.
Scroll’un jQuery’sini kodlamak
jQuery’miz için dosyamızı çağırdıktan sonra tek yapmamız gerek şey aşağıdaki kodu sitemize eklemek olacak.
<script>
$(function(){
$(".sol #scroll").hide();
$(function(){
$(window).scroll(function(){
if($(this).scrollTop() > 200){
$(".sol #scroll").fadeIn();
}else {
$(".sol #scroll").fadeOut();
}
});
$(".sol #scroll").click(function(){
$("body,html").animate({
scrollTop : 0
}, 800);
return false;
});
});
});
</script>
Bu kodu burada yazdık ancak benim şuan amacım burada sadece bunu yaparak sitenize eklemeniz değil.Bunun nasıl yapıldığını kullanımını anlatmak.
Bu kodu yazmak için aslında sadece “scroll” fonksiyonundan yararladım ve ilk olarak pencere(yani ekran)’deki scroll 200′lük bir boşluk ile aşağı inerse bize scroll divimizi göstermesini sağladım ve eğer geri çıkarsa bunun kaybolması gerektiğini sağladım.Ardından son işlem olarak animate metodu ile scrollTop’ı 0′a eşitlediğimiz zaman en üste çıkmasını sağlayacaktır bunu sağladım.İşlemim bu kadardı.
Yazımı okuduğunuz için teşekkürler.Şimdi Bu işlemleri videolu anlatımım ile sorunsuz bir şekilde yapabilirsiniz.
Demoyu ve Kaynağı İncelemek için tıklayınız..
