Membuat Tombol Back To Top Dengan Efek Bounce

• 
  
• 
  
• 
  

posted by Aldy Warsa Cristian Pinem on Jumat, Mei 29, 2015 No Comments Blogging

Hallo,,Kali Ini Saya Membahas Tutorial Back To Top
Dengan Efek Bounce !
Tutorial Ini Saya Ambil Dari Legenda Blog,,Boleh Di Bilang Begitu !,,Karena Karya Karya Nya !
Siapa Lagi Selain Kang Ismet :) Oke..
Pertanyaan Pengunjung : Apa Itu Efek Bounce ??????
Efek Bounce Itu ,,Efek Seperti Memantul,,
Pengen Tahu Tutorial Nya ?
Oke Kita Mulai Aja !




Folow My Tutorial
-Pasang Jquery Terlebihdahulu Di Blog Anda !

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

Note:Jika Jquery Sudah Terpasang Di Blog Anda,,Lewati Aja
-Pasang Kode Berikut 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>

-Buat Widget Baru Lalu Paste Kode Berikut

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

Oke Sekian Dulu Info Dan Tips Dari Saya :) Semoga Bermanfaat