Bu sitedeki her şey Sevgi ile kodlanmıştır.

Kategori Listesini Göster

jQuery ile Roket Görünümlü Yukarı Çık Butonu Yapalım


FacebookTwitterPinterestTumblrYazdır


jQuery ile Roket Görünümlü Yukarı Çık Butonu YapalımBuradaki içeriğimde sadece JavaScript kullanarak güzel bir yukarı çık butonu hazırlamıştık sizlerle. Ancak isteğe bağlı olarak, bu eklentiyi jQuery kullanarak da yapmak isteyenler olabilir. Ben bunu unutmadım ve aynı eklentiyi jQuery ile tekrar hazırladım. Aşağıdaki kodları dilerseniz WordPress, dilerseniz Blogger v.b. istediğiniz altyapıya sahip sitenizde kullanabilirsiniz. Sadece sitenizde jQuery kütüphanesi yüklü olmalıdır. Bunun haricinde her şey aşağıda yer almaktadır. Kolay gelsin.

AYRICA: jQuery ile Tab Menü Yapımı (En İyisi)

jQuery ile Roket Görünümlü Yukarı Çık Butonu Yapalım

Temanızda aşağıdaki kodu bulun.

</body>

Aşağıdaki kodları, yukarıdaki koddan önce ekleyin.

<style>
#backtotop{
position:fixed;
bottom:20px;
right:20px;
background: url(http://4.bp.blogspot.com/-HXzJySdtrec/W9CNV5CSucI/AAAAAAAAR-o/qjlLYjjd52MasVTqz7HpuaX-8v3nvht9QCK4BGAYYCw/s1600/icons8-launch-80.png) no-repeat;
width:80px;
height:80px;
z-index: 9999;
display:none;
}
</style>
<a href="#" id="backtotop"></a>
<script>
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('#backtotop').fadeIn();
} else {
$('#backtotop').fadeOut();
}
});
$('#backtotop').click(function(){
$("html, body").animate({ scrollTop: 0 }, 500);
return false;
});
});
</script>

Örnek Görünüm

jQuery ile Roket Görünümlü Yukarı Çık Butonu Yapalım

  1. Yorum bulunmamaktadır.

Bu yazıya yorum göndermek ister misiniz?

Dikkat: Her yorum gönderen kişi, kendi gönderdiği yorumdan sorumlu olmaktadır.
Not: Yazı ile herhangi bir ilgisi bulunmayan yorumların onaylanmadığını belirtmek isteriz.
Yazı Etiketleri
Yukarı Çık