Tavsiye: Google Belgeseli – Türkçe (Bir Başarı Hikâyesi) Hatırlayalım: Lizzie Velasquez: Gerçek Bir Mücadele Öyküsü
Fatih Özel Kolej

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

Sponsorlu Bağlantılar

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

Sponsorlu Bağlantılar


Teknobeyin Facebook
Sayfasını Bugün Beğenin!
  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
Bugün Günlerden: . Toplam 19 kategorideki 7.874 yazıda 8.172 yorum bulunmaktadır.
Yukarı Çık