Membuat Tombol Back to Top Yang Asik

Back to top button - Hae gaez, hari ini kita bakal kasih kamu nih caranya bikin tombol back to top dengan efek bounce/memantul. Emang sih udah banyak banget tutorialnya di Google, tapi nggak ada salahnya dong kita kasih tau juga. Nah, thanks banget nih buat suhu blogger kita yaitu Kang Ismet, pasti kalian yang rajin blogwalking pasti tau lah blog kang Ismet.

Yaudah dari pada kelamaan mending simak cara buat tombol back to top yang asik ini ya.

1. Simpan kode jQuery di atas </head>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>

2. Simpan kode ini masih di atas </head>

<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').slideDown(200); } else { $('#BounceToTop').slideUp(300); } });
$('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });
</script>

3. Buat widget baru HTML/JavaScript, simpan kode ini:

<style type='text/css' scoped='scoped'>#BounceToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}</style><div id='BounceToTop'><img alt='Back to top' src='https://cdn2.iconfinder.com/data/icons/snipicons/5000/circle-arrow-up-64.png'/></div>

Nah untuk mengganti tampilan panahnya, kamu bisa ganti source yang warna merah sesuka hati kamu. Atau cari di www.iconfinder.com juga bisa. Semoga bermanfaat gaez. :)