PS PLAYER

HTML 5 Audio Player

CSS only Müzik Player Elementi

Müzik Player | Audio Player

jQuery ile Yukarı Çık Butonu Yapmak

Bilim ve Teknoloji Haberleri 9 Haziran 2016
191 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
222 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
221 Görüntülenme
Selda Bağcan WOMAD’e katılıyor

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

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

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

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

Cin çarpmış memleketimi!

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

Harp Akademileri lojmanlarına operasyon

25 Temmuz 2016
153 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
143 Görüntülenme