Popup Resim Galeri Modülü Yapımı

Resimleri Popup Pencerede Gösterme

HTML & CSS ile Popup Pencere Yapımı

CSS ile Oluşturulmuş Takvim Şablonu

jQuery ile Yukarı Çık Butonu Yapmak

Bilim ve Teknoloji Haberleri 9 Haziran 2016
146 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
TMSF’den Bank Asya açıklaması

TMSF’den Bank Asya açıklaması

25 Temmuz 2016
187 Görüntülenme
Binali Yıldırım’dan ‘erken seçim’ açıklaması

Binali Yıldırım’dan ‘erken seçim’ açıklaması

25 Temmuz 2016
182 Görüntülenme
Selda Bağcan WOMAD’e katılıyor

Selda Bağcan WOMAD’e katılıyor

25 Temmuz 2016
174 Görüntülenme
Güvenlik açıkları, Apple’ı tehdit ediyor

Güvenlik açıkları, Apple’ı tehdit ediyor

25 Temmuz 2016
147 Görüntülenme
Cin çarpmış memleketimi!

Cin çarpmış memleketimi!

25 Temmuz 2016
132 Görüntülenme
Harp Akademileri lojmanlarına operasyon

Harp Akademileri lojmanlarına operasyon

25 Temmuz 2016
112 Görüntülenme
Almanya’da bombalı saldırı: 1 ölü, 12 yaralı

Almanya’da bombalı saldırı: 1 ölü, 12 yaralı

25 Temmuz 2016
111 Görüntülenme
Bunlar da var!
Dünyanın En Büyük Minyatür Şehri [Video]

Dünyanın En Büyük Minyatür Şehri [Video]

18 Ocak 2016
86 Görüntülenme
Çocuğun Saçından Çıkan Bitler Şaşırttı

Çocuğun Saçından Çıkan Bitler Şaşırttı

5 Eylül 2015
100 Görüntülenme
Derbide rekor internet kullanımı

Derbide rekor internet kullanımı

6 Mart 2016
93 Görüntülenme
Galaxy S7’de ilginç sorun!

Galaxy S7’de ilginç sorun!

1 Mayıs 2016
88 Görüntülenme
Instagram Türk Takipçi Satın Almak

Instagram Türk Takipçi Satın Almak

8 Ekim 2016
157 Görüntülenme