Colors Three Web Site Tasarımı

Colors One Web Site Tasarımı

Clarity Web Site Tasarımı

Chicanery Web Site Tasarımı

jQuery ile Yukarı Çık Butonu Yapmak

Science and Technology News Perşembe Haziran 9th, 2016
370 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ı | Acrab

Profesyonel Kurumsal Firma Sitesi Tasarımı | Acrab

Çarşamba Kasım 2nd, 2016
472 Görüntülenme
Profesyonel Kurumsal Firma Sitesi Tasarımı | Achird

Profesyonel Kurumsal Firma Sitesi Tasarımı | Achird

Çarşamba Kasım 2nd, 2016
540 Görüntülenme
Profesyonel Kurumsal Firma Sitesi Tasarımı | Achernar

Profesyonel Kurumsal Firma Sitesi Tasarımı | Achernar

Çarşamba Kasım 2nd, 2016
437 Görüntülenme
Profesyonel Kurumsal Firma Sitesi Tasarımı  | Acamar

Profesyonel Kurumsal Firma Sitesi Tasarımı | Acamar

Salı Kasım 1st, 2016
458 Görüntülenme
Profesyonel Kurumsal Firma Sitesi Tasarımı Pulse v2.5

Profesyonel Kurumsal Firma Sitesi Tasarımı Pulse v2.5

Cumartesi Ekim 29th, 2016
462 Görüntülenme
Hazır Kurumsal Web Sitesi Scripti Modern v 2.5

Hazır Kurumsal Web Sitesi Scripti Modern v 2.5

Cumartesi Ekim 29th, 2016
484 Görüntülenme
Kurumsal Web Site Scripti Ruler v 2.5

Kurumsal Web Site Scripti Ruler v 2.5

Cumartesi Ekim 29th, 2016
364 Görüntülenme
Kurumsal Web Paketi Cenix v 2.5

Kurumsal Web Paketi Cenix v 2.5

Çarşamba Ekim 26th, 2016
296 Görüntülenme
Kurumsal Web Paketi Limber v 2.0

Kurumsal Web Paketi Limber v 2.0

Pazartesi Ekim 24th, 2016
294 Görüntülenme
Umre Hakkında Bilinmesi Gerekenler

Umre Hakkında Bilinmesi Gerekenler

Pazartesi Ekim 24th, 2016
218 Görüntülenme
Bunlar da var!
WhatsApp videolu arama özelliği Mayıs’ta geliyor mu?

WhatsApp videolu arama özelliği Mayıs’ta geliyor mu?

Cuma Nisan 10th, 2015
197 Görüntülenme
Windows 10 yükseltme bildirimi yakında kalkıyor

Windows 10 yükseltme bildirimi yakında kalkıyor

Çarşamba Mayıs 11th, 2016
248 Görüntülenme
Teneke Kutudan Ocak Yapımı [Video]

Teneke Kutudan Ocak Yapımı [Video]

Cuma Ocak 22nd, 2016
210 Görüntülenme
HTC büyük bir işten çıkarma operasyonuna hazırlanıyor

HTC büyük bir işten çıkarma operasyonuna hazırlanıyor

Salı Eylül 1st, 2015
299 Görüntülenme
İşte HTC One M9’un performansı

İşte HTC One M9’un performansı

Cumartesi Mart 28th, 2015
183 Görüntülenme