Volkan Bilimci, Aktif Haldeki Volkanın içine Düştü!

Google Oturum Sorunu Üzerine Resmi Açıklama

Google’ın anlık mesajlaşma uygulaması Allo masaüstüne geliyor

Öğrenci odaklı mobil sadakat uygulaması Mumbara, Denizli’den Anadolu’ya yayılmak istiyor

jQuery ile Yukarı Çık Butonu Yapmak

Bilim ve Teknoloji Haberleri 9 Haziran 2016
253 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
435 Görüntülenme
Profesyonel Kurumsal Firma Sitesi Tasarımı  | Acamar

Profesyonel Kurumsal Firma Sitesi Tasarımı | Acamar

1 Kasım 2016
337 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
361 Görüntülenme
Kurumsal Web Site Scripti Ruler v 2.5

Kurumsal Web Site Scripti Ruler v 2.5

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

Kurumsal Web Paketi Cenix v 2.5

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

Kurumsal Web Paketi Limber v 2.0

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

Umre Hakkında Bilinmesi Gerekenler

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

Kurumsal Web Paketi Trend v 2.0

21 Ekim 2016
218 Görüntülenme
Bunlar da var!
Huysuz ve Sevimli [Video]

Huysuz ve Sevimli [Video]

4 Aralık 2015
168 Görüntülenme
Fotoğraf Filmindeki Resim Nasıl Alınır? [Video]

Fotoğraf Filmindeki Resim Nasıl Alınır? [Video]

18 Ocak 2016
171 Görüntülenme
Dünyanın En Yüksek Binaları

Dünyanın En Yüksek Binaları

24 Mayıs 2016
162 Görüntülenme
Responsive Arama Alanı Çalışması

Responsive Arama Alanı Çalışması

8 Aralık 2015
239 Görüntülenme
3D yazıcıyla üretilen ilaç ABDde onaylandı

3D yazıcıyla üretilen ilaç ABDde onaylandı

5 Ağustos 2015
181 Görüntülenme