Scairelys

Kali ini saya akan membagikan cara membuat back to top lagi nih ,udah lama ga post udah ganti template aja ya wkwk soalnya bosen template yang kemaren berat , nanti akan saya share dah templatenya :) . Kalo dipost sebelumnya Cara Membuat Tombol Back To Top Dengan Gambar yang efeknya smooth , sekarang saya akan post dengan efek bounce yang saya dapet dari blog Kompi Ajaib dan ada juga kodenya yang dia dapat di Kang Ismet

Berikut langkah-langkahnya :

1. Silahkan copy kode CSS di bawah ini dan simpan di atas kode ]]></b:skin>

#BounceToTop {text-align:center;position:fixed;bottom:10px;right:10px;cursor:pointer;width:30px;height:20px;border-radius:2px;padding:5px;display:none;}#BounceToTop:before {content:""; position:absolute; bottom:5px; right:5px; width:0; height:0; border-style:solid; border-width:0 15px 20px 15px; border-color:transparent transparent #A6A6A6 transparent; line-height:0;}#BounceToTop:hover:before {content:""; position:absolute; bottom:5px; right:5px; width:0; height:0; border-style:solid; border-width:0 15px 20px 15px; border-color:transparent transparent #464646 transparent; line-height:0 }#BounceToTop:after {content:""; position:absolute; bottom:5px; right:11px; width:0; height:0; border-style:solid; border-width:0 9px 12px 9px; border-color:transparent transparent #D2D2D2 transparent; line-height:0;}

2. Copy kode ini dan simpan di atas kode </body>

<script type='text/javascript'> $(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').fadeIn(); } else { $('#BounceToTop').fadeOut(); } }); $('#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. Kemudian simpan kode di bawah ini persis di bawah kode javascript yang dilangkah nomer 2

<div id='BounceToTop'/>

4. Terakhir silahkan save templatenya. Dan tombolnya akan berada di sebelah kanan bawah blog Anda, dan penampakannya seperti pada gambar thumbnail di atas atau pada tombol back to top blog ini (jika tombolnya belum saya ganti lagi hheehehe).