ile kodlanmıştır.
Birçok web sitesi, kullanıcı deneyimini kolaylaştırmak adına, sağ alt tarafta yer alan bir "yukarı çık uygulaması" kullanıyor. Böylelikle, sayfa aşağısında bulunan bir kullanıcı, bu uygulama sayesinde kolaylıkla en yukarı çıkabiliyor. Dolayısı ile çok gerekli olduğu dile getirilemese de, web siteniz için farklılık yaratabilecek bir uygulama olduğu dile getirilebilmektedir. Bu içeriğimizde, jQuery kullanarak oldukça sağlıklı çalışan bir yukarı çık butonu hazırlıyor olacağız. Böylelikle, Blogger veya WordPress fark etmeksizin, diğer birçok yazılımda da bu uygulamayı kullanabileceksiniz. Dilerseniz, ilgili adımlara göz atarak, uygulamanın nasıl yapıldığını öğrenelim.
jQuery Kullanarak "Yukarı Çık Butonu" Hazırlıyoruz
Temanızın CSS bölümüne aşağıdaki kodları ekleyin.
.yukaricik {
z-index:100;
position:fixed;
bottom:15px;
right:15px;
display:none;
}
.yukaricik-buton {
width:60px;
height:60px;
}
Temanızın üst kısımlarında yer alan aşağıdaki kodu bulun.
<head>
Aşağıdaki kodları, yukarıdaki koddan hemen sonra ekleyin.
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(window).scroll(function(){
if ($(this).scrollTop() > 100)
$(".yukaricik").fadeIn(500);
else
$(".yukaricik").fadeOut(500);
});
$(document).ready(function(){
$(".yukaricik").click(function(){
$("html, body").animate({ scrollTop: "0" }, 500);
return false;
});
});
</script>
Temanızın HTML sayfasında yer alan aşağıdaki kodu bulun.
</body>
Aşağıdaki kodları da, yukarıdaki koddan hemen önce ekleyin.
<div class="yukaricik">
<a href="javascript:;">
<img alt="Yukarı Çık" title="Yukarı Çık" class="yukaricik-buton" src="yukari-cik.png" />
</a>
</div>
Bilgi: Yukarıda yer alan "yukari-cik.png" bölümünü kendinize göre değiştirmeyi unutmayın.
Not: Yukarı çık butonu olarak, aşağıda yer alan görseli kullanabilirsiniz.
Yorum bulunmamaktadır.