Membuat Tombol Back To Top Dengan Efek Bounce(Memantul)

Ya back to top, tombol ini banyak digunakan di blog-blog cerita atau sekedar blog biasa... tombol back to top juga bisa digunakan memakai tombol Home. dan  kali ini saya mau share tentang membuat bakc to top efek memantul, langsung aja oke.

Pertama, simpan Jquery diatas </head>



<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
lewati langkah ini apabila di blog sobat sudah ada. Versi bisa berbeda-beda seperti 1.3.2, 1.6.4, 1.7.1, dll.

Kedua, simpan kode ini masih diatas </head>


 <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>
Ketiga,buat widget html baru dengan 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='http://2.bp.blogspot.com/-MFhU3vLp5ho/UiaBZeA1McI/AAAAAAAAAQs/MrzW2ljP5mA/s1600/arrow-up_basic_blue.png'/></div> 

Tampilan tombol dengan kode di atas menggunakan fade in / fade out (muncul perlahan), apabila tombol ingin muncul dari bawah seperti blog ini, ganti kode pada langkah 2 dengan kode ini :


<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>
 Happy blogging guys ;)


G+

Previous
Next Post »

2 komentar



Blogger Bijak Selalu Ninggalin Jejak ! Show EmoticonHide Emoticon

Thanks banget yang udah mau sempetin comment, karena SERIUS itu sangat berarti buat gue ^-^