Strongly Typed Web Site Tasarımı

8Squares Web Site Tasarımı

Bangalore Web Site Tasarımı

Cloudset Web Site Tasarımı

jQuery ile Yukarı Çık Butonu Yapmak

Science and Technology News Perşembe Haziran 9th, 2016
470 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
Sirkeci’de hareketli dakikalar

Sirkeci’de hareketli dakikalar

Salı Mayıs 30th, 2017
52 Görüntülenme
CHP’li Toprak’tan canlı performans

CHP’li Toprak’tan canlı performans

Salı Mayıs 30th, 2017
78 Görüntülenme
Osmaniye merkezli FETÖ operasyonu

Osmaniye merkezli FETÖ operasyonu

Salı Mayıs 30th, 2017
76 Görüntülenme
Tarkan, zeytinliklerin imara açılmasına isyan etti!

Tarkan, zeytinliklerin imara açılmasına isyan etti!

Salı Mayıs 30th, 2017
58 Görüntülenme
Aladağlı aileler: Davayı geri çekelim diye bir para teklif

Aladağlı aileler: Davayı geri çekelim diye bir para teklif

Salı Mayıs 30th, 2017
59 Görüntülenme
Snapchat kendi drone’unu yapıyor

Snapchat kendi drone’unu yapıyor

Salı Mayıs 30th, 2017
64 Görüntülenme
Kaçak yaban domuzu eti deposuna baskın

Kaçak yaban domuzu eti deposuna baskın

Salı Mayıs 30th, 2017
44 Görüntülenme
Bunlar da var!
Bursa’da doğal gaz borusuna çarpan araç yan yattı!

Bursa’da doğal gaz borusuna çarpan araç yan yattı!

Salı Mayıs 30th, 2017
45 Görüntülenme
Sevgililer günü için en ideal teknolojik ürünler

Sevgililer günü için en ideal teknolojik ürünler

Pazartesi Şubat 15th, 2016
298 Görüntülenme
Sony Xperia Z5, Z5 Compact ve Z5 Ultra geliyor

Sony Xperia Z5, Z5 Compact ve Z5 Ultra geliyor

Pazar Temmuz 5th, 2015
354 Görüntülenme
En Popüler Windows Telephone Telefon Değişti

En Popüler Windows Telephone Telefon Değişti

Salı Mayıs 3rd, 2016
358 Görüntülenme
8 Maddede Bahar Nedir?

8 Maddede Bahar Nedir?

Pazartesi Nisan 18th, 2016
265 Görüntülenme