Cara Membuat Tombol Back To Top Dengan Efek Bounce

Cara Membuat Tombol Back To Top Dengan Efek Bounce

Cara Membuat Tombol Back To Top Dengan Efek Bounce - Halo apa kabar sahabat, pada kesempatan ini saya akan berbagi cara membuat tombol back to top dengan efek bounce, Apa Efek Bounce itu? Bounce artinya memantul jadi back to top setelah di scroll ada sedikit efek bounce. Ok langsung saja di simak caranya.

Langkah pertama : simpan kode ini di atas </head>

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

Langkah Kedua : simpan kode di bawah ini masih di atas 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>

Langkah Ketiga : buat widget baru HTML/JavaScript simpan kode kode di bawah 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/AVvXsEgR1exDqlXI49_nNDwvsnIkJDDbcUApCzrGMfbnm45jZRVv7yRWNh7FXEPOrmlMt28La1yqYDGlVpOqzZyvn9ry4VSibhhh6V2JJ5p9aqVD3lZGMRgisbRHlYO8x7DMhDa_2r16oJCETQQD/s1600/arrow-up_basic_blue.png'/></div> 

Tampilan kode back to top di atas muncul secara perlahan, jika sobat ingin seperti blog saya tombol back to topnya muncul dari bawah ini kodenya

<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> 

Semoga bermanfaat..

Posted by Unknown on Selasa, 31 Desember 2013 - Rating: 4.5

Title : Cara Membuat Tombol Back To Top Dengan Efek Bounce
Description : Cara Membuat Tombol Back To Top Dengan Efek Bounce Cara Membuat Tombol Back To Top Dengan Efek Bounce - Halo apa kabar sahabat, pada ke...

Tweet