SpringTime Web Site Tasarımı

StudioClick Web Site Tasarımı

ABC Company Web Site Tasarımı

3Dmix Web Site Tasarımı

jQuery ile Yukarı Çık Butonu Yapmak

Science and Technology News Perşembe Haziran 9th, 2016
425 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
528 Görüntülenme
Profesyonel Kurumsal Firma Sitesi Tasarımı | Achird

Profesyonel Kurumsal Firma Sitesi Tasarımı | Achird

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

Profesyonel Kurumsal Firma Sitesi Tasarımı | Achernar

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

Profesyonel Kurumsal Firma Sitesi Tasarımı | Acamar

Salı Kasım 1st, 2016
513 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
519 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
549 Görüntülenme
Kurumsal Web Site Scripti Ruler v 2.5

Kurumsal Web Site Scripti Ruler v 2.5

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

Kurumsal Web Paketi Cenix v 2.5

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

Kurumsal Web Paketi Limber v 2.0

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

Umre Hakkında Bilinmesi Gerekenler

Pazartesi Ekim 24th, 2016
273 Görüntülenme
Bunlar da var!
NASA, GoPro ile kaydedilen uzay yürüyüşü videolarını yayınladı

NASA, GoPro ile kaydedilen uzay yürüyüşü videolarını yayınladı

Perşembe Nisan 16th, 2015
273 Görüntülenme
Maşinga: Kişiden kişiye araba kiralama platformu

Maşinga: Kişiden kişiye araba kiralama platformu

Çarşamba Kasım 11th, 2015
337 Görüntülenme
Neko02 Web Site Tasarımı

Neko02 Web Site Tasarımı

Cumartesi Nisan 15th, 2017
100 Görüntülenme
Asterisk Web Site Tasarımı

Asterisk Web Site Tasarımı

Pazar Nisan 30th, 2017
86 Görüntülenme
Meizu’dan Ubuntu tabanlı bir akıllı telefon geliyor

Meizu’dan Ubuntu tabanlı bir akıllı telefon geliyor

Pazartesi Şubat 15th, 2016
307 Görüntülenme