Türkiye Drone Ligi başlıyor

Artık Youtube’un da okulu var

Youtube Videolarını Arkadaşlarınızla Birlikte Canlı İzleyin!

28. Yılını Kutlayan WWW.’nin Yaratıcısından Ciddi Uyarı!

jQuery ile Yukarı Çık Butonu Yapmak

Bilim ve Teknoloji Haberleri 9 Haziran 2016
310 Görüntülenme

Evet arkadaşlar uzun sayfalarımızda kullanıcılarımız sayfanın en altına indiklerinde onları daha hızlı ve pratik bir şekilde sayfanın üstüne taşıyacak bir buton hoşlarına gidebilir. Bunu butonu farklı şekillerde yapabilirsiniz fakat bu konumuzda jQuery, CSS ve HTML kullanarak  bunu yapacağız.

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>

 

Yorumlar

Henüz hiç yorum yapılmamış.

İlginizi Çekebilir
Profesyonel Kurumsal Firma Sitesi Tasarımı | Achird

Profesyonel Kurumsal Firma Sitesi Tasarımı | Achird

2 Kasım 2016
487 Görüntülenme
Profesyonel Kurumsal Firma Sitesi Tasarımı  | Acamar

Profesyonel Kurumsal Firma Sitesi Tasarımı | Acamar

1 Kasım 2016
405 Görüntülenme
Hazır Kurumsal Web Sitesi Scripti Modern v 2.5

Hazır Kurumsal Web Sitesi Scripti Modern v 2.5

29 Ekim 2016
410 Görüntülenme
Kurumsal Web Site Scripti Ruler v 2.5

Kurumsal Web Site Scripti Ruler v 2.5

29 Ekim 2016
304 Görüntülenme
Kurumsal Web Paketi Cenix v 2.5

Kurumsal Web Paketi Cenix v 2.5

26 Ekim 2016
251 Görüntülenme
Kurumsal Web Paketi Limber v 2.0

Kurumsal Web Paketi Limber v 2.0

24 Ekim 2016
249 Görüntülenme
Umre Hakkında Bilinmesi Gerekenler

Umre Hakkında Bilinmesi Gerekenler

24 Ekim 2016
183 Görüntülenme
Kurumsal Web Paketi Trend v 2.0

Kurumsal Web Paketi Trend v 2.0

21 Ekim 2016
270 Görüntülenme
Bunlar da var!
Nvidia ve MediaTek birleşiyor mu?

Nvidia ve MediaTek birleşiyor mu?

2 Temmuz 2015
198 Görüntülenme
Düğün Dernek Sünnet – Fragman [Video]

Düğün Dernek Sünnet – Fragman [Video]

19 Ekim 2015
217 Görüntülenme
Çamaşır Makinesi Tramboline Konulursa [Video]

Çamaşır Makinesi Tramboline Konulursa [Video]

19 Ocak 2016
222 Görüntülenme