Öneri ve Hata Raporu



Günün Sözü Asla yalnız yürümeyeceksin

oylama 3.2/5 yorum 1 yorum yazar Hakan Taşan tarih 23 Haziran 2015

Bu yazıda jQuery ile yukarı çık butonu yapımını okuyacaksınız. Bir örneğini bu sayfada sağ alt köşede görebilirsiniz. Kendi sitem için yaptığım uygulamayı sizinle paylaşacağım. Sizin yapmanız gereken kodları uygun yere kopyalamak ve ayarlarınızı (butonun görünme hızı, sayfayı ne kadar aşağı kaydırırsam buton görünsün, butona tıklandığında yukarı çıkma hızı ne olsun vb.) kendinize göre uyarlamak.

jQuery Kodu

$(window).scroll(function(){
    if ($(this).scrollTop() > 100)    // Sayfa ne kadar aşağı kayarsa buton görünsün. 100 sayısı = Kaydırma çubuğunun piksel konumu. Bu sayı değiştirilebilir.
        $("#yukari").fadeIn(500);    // Yukarı çık butonu ne kadar hızla ortaya çıksın. 500 milisaniye = 0,5 saniye. Bu sayı değiştirilebilir.
    else 
        $("#yukari").fadeOut(500);    // Yukarı çık butonu ne kadar hızla ortadan kaybolsun. 500 milisaniye = 0,5 saniye. Bu sayı değiştirilebilir.
});

$(document).ready(function(){
    $("#yukari").click(function(){    // Yukarı çık butonuna tıklanıldığında aşağıdaki satır çalışır.
        $("html, body").animate({ scrollTop: "0" }, 500);    // Sayfa ne kadar hızla en yukarı çıksın.
        // 0 sayısı sayfanın en üstüne çıkılacağını belirtir.
        // 500 sayısı ne kadar hızla çıkılacağını belirtir. 500 milisaniye = 0,5 saniye. Bu sayı değiştirilebilir.
        return false;
    });
});

 

CSS Kodu

#yukari
{
    z-index:100;    // Butonun arka plan ya da diğer nesnelerin altında değil en üstünde görünmesi için
    position:fixed;    // Sayfa aşağı yukarı kaydığında butonun sabit kalması için
    bottom:10px;    // Butonla sayfanın en altı arasında 10px boşluk oluşturur. İstediğiniz gibi değiştirebilirsiniz.
    right:10px;    // Butonla sayfanın en sağı arasında 10px boşluk oluşturur. İstediğiniz gibi değiştirebilirsiniz.
    display:none    // Sayfa ilk yüklendiğinde yukarı çık butonunu gizler.
}
#yukari_boyut
{
    width:50px;    // Yukarı çık butonu resmi için genişlik belirtir. İstediğiniz gibi değiştirebilirsiniz.
    height:50px    // Yukarı çık butonu resmi için yükseklik belirtir. İstediğiniz gibi değiştirebilirsiniz.
}

 

HTML Kodu

<div id="yukari">
    <a href="javascript:;"><img alt="Yukarı Çık" title="Yukarı Çık" id="yukari_boyut" src="buton_resmi.ico"></a>
</div>

 

onizleme

paylaş Paylaş
oylama yap Oyla

makale yorumları YORUMLAR

1 Yorum


yorum

Melih

23 Ocak 2016 07:16


Jquery kodunu nasıl ve nereye eklememiz gerekiyor Wordpress'te?

yorum

Admin

23 Ocak 2016 13:43


wordpress kullanmadığım için bilmiyorum ama tema dosyalarında düzenleme yapacaksınız sanırım, internetten araştırmakta fayda var.

yorum

serkan çakır

20 Mart 2016 11:55


merhaba bu ok işaretinin yarine başka işaret koymak istiyorum onu nasıl yapıcaz

yorum

Admin

20 Mart 2016 16:30


merhaba, html kodunun içerisindeki src kısmını kendinize göre değiştirmeniz gerekiyor.

yorum

Enes Karademir

03 Eylül 2016 13:41


Değerli anlatımınız için teşekkürederim.

yorum

cllgny

27 Kasım 2016 20:12


HTML kodlarında Sadece src mi değişecek.. diğerleri aynımı? Query kodunu nereye koyacaz. javascript olarakmı kaydedeğiz. nerde göstereceğiz bunu..

yorum

Admin

27 Kasım 2016 21:19


Merhaba, jquery kodları aynı zamanda javascript kodudur. dolayısıyla script etiketleri arasında kullanacaksınız. src ise kullanacağınız resmin adresidir.

yorum

ahmet karaaslan

21 Ocak 2017 13:16


detaylı anlatım yaparsanız dreamweaver için. dreamweaver de nereye ne koyacağımı tam olarak kestiremiyorum css kodlarımın içine verdiğiniz css kodlarını girdim fakat jquery kodlarını boş bir text dosyası oluşturup yazdım fakat olmuyor

yorum

Admin

21 Ocak 2017 16:02


merhaba, dreamweaver kullanmadığım için bilmiyorum fakat jquery kodlarınızı html sayfanızın içerisine script etiketleri arasına koyacaksınız.

yorum

misafir

06 Şubat 2017 14:46


çok iyi , işi yaradı, teşekkürler... :)