Buradaki 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
Yorum bulunmamaktadır.