Logo Creator Tasarımı

Kredi Kartı ile Alış Veriş 17 Ağustosda Sona Eriyor!

Giphy ile Fotoğraflarınızı GIF’lere Dönüştürün!

Stuff Tasarımı

jQuery ile Yukarı Çık Butonu Yapmak

Science and Technology News Perşembe Haziran 9th, 2016
582 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
104 Görüntülenme
CHP’li Toprak’tan canlı performans

CHP’li Toprak’tan canlı performans

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

Osmaniye merkezli FETÖ operasyonu

Salı Mayıs 30th, 2017
127 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
104 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
109 Görüntülenme
Snapchat kendi drone’unu yapıyor

Snapchat kendi drone’unu yapıyor

Salı Mayıs 30th, 2017
114 Görüntülenme
Dokuz Eylül Üniversitesi’ne ‘FETÖ’ operasyonu: 27 gözaltı

Dokuz Eylül Üniversitesi’ne ‘FETÖ’ operasyonu: 27 gözaltı

Salı Mayıs 30th, 2017
103 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
79 Görüntülenme
Bunlar da var!
Life In Color Web Site Tasarımı

Life In Color Web Site Tasarımı

Perşembe Haziran 29th, 2017
74 Görüntülenme
Huawei P8 Platinum Edition modelinin fiyatı belli oldu!

Huawei P8 Platinum Edition modelinin fiyatı belli oldu!

Pazar Nisan 5th, 2015
277 Görüntülenme
Pasta Değil Sanat Eseri

Pasta Değil Sanat Eseri

Cuma Mart 18th, 2016
350 Görüntülenme
iOS 8.3 ile Klavye Düzeni Değişiyor

iOS 8.3 ile Klavye Düzeni Değişiyor

Cumartesi Mart 14th, 2015
321 Görüntülenme
Dünyanın ilk NFC uyumlu masaüstü bilgisayarı ASUS M70 tanıtıldı

Dünyanın ilk NFC uyumlu masaüstü bilgisayarı ASUS M70 tanıtıldı

Perşembe Mayıs 14th, 2015
319 Görüntülenme
Namaz Vakitleri Scripti

Namaz Vakitleri Scripti

Perşembe Mayıs 4th, 2017
339 Görüntülenme
Sürekli Antibiyotik Kullanmanın Zararı

Sürekli Antibiyotik Kullanmanın Zararı

Cumartesi Mart 19th, 2016
340 Görüntülenme