Cara Membuat Tombol Back to Top Dengan Efek Bounce

Cara Membuat Tombol Back to Top Dengan Efek Bounce - Pagii gann kali bertemu lagi dengan saya yang ganteng ini :v pagii ini gwa akan ngebahas Cara Membuat Tombol Back to Top Dengan Efek Bounce sebelum ke tutorial cara pasang kita akan bahas apa itu bounce? bounce sendiri artinya memantul, jadi back to top setelah discroll akan ada sedikit efek pantulan nah, udah pada ngerti kan? yuk langsung aja ke tutorial cara memasangnya cekidottt.. 

1. Cari kode :

 </head>
untuk memudahkan pencarian pencet [CTRL+F]

2. Lalu masukkan kode jQuery dibawah ini diatas kode </head>

 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
*Lewati langkah ini jika di blog agan udah terpasang kode jQuery

  3. Simpan kode dibawah ini juga diatas kode </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>

4. 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOaoTa1PhW5rDEyWfL4sr6EGd9OcKwCO1paQ3-bLzolHMdzRRq-51saNncAK3qEqwOFhP_4wLmyRw_lhUT7mKWIEJOSz28f1OSV20Hm4APyHEGadT6Uo_DFwnIRefJRJ2OYTXHUGFff2ul/s1600/arrow-up_basic_blue.png'/></div>

Kita sudah'i dulu yaa.. pelajarannya terimakasih atas perhatiannya wassalamualaikumwarohmatullahiwabarokatu see u next post ;)

Tweet