Cara Membuat Back To Top Dengan Efek Bounce
Langsung Aja menuju ke TKP!
1. Buka Blog Sobat
2. Pilih Template
3. Pilih edit Template
4. Simpan jQuery di atas kode </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.
5. Simpan kode di bawah ini tepat di atas kode </head>
<script type='text/javascript'>6. Buat widget baru HTML/JavaScript, simpan kode di bawah ini :
$(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>
<style type='text/css' scoped='scoped'>Tampilan tombol dengan kode di atas menggunakan fade in / fade out (muncul perlahan), apabila tombol ingin muncul dari bawah, ganti kode pada langkah 5 dengan kode ini :
#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/AVvXsEi5T3ebP2mMyCzCnBIXJelunS_SIYpphXAqgToJ9q8Ye1uug9Fnj8GGcWhNQUIM2kWj-co5uqHX9PG6seHI0G-jEl9sJzJMeHng0CyDhky4sUHUzsRVx8lFh6C7Xw10p_O71r5RsAU513vS/s1600/arrow-up_basic_blue.png'/></div>
<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>
Sekian Tutorial Hari Ini, Semoga Bermanfaat Bagi Kalian Semua
Terimakasih banyak mas, bagus nih, bisa saya coba..
BalasHapus