Kemarin di posting sebelum ini gue dah bikin artikel knowledge sharing tentang cara membuat tombol back to top dengan JQuery, hasilnya mantap kan?
Besoknya gue blogwalking ke blog orang random dan ada tombol back to top dengan. Tapi ada efek yang aneh begitu ke scroll ke top (atas) maka pagenya akan seolah-olah memantul. NORAK BANGET! Besoknya gue ikutan bikin. *curi source kode* hasilnya bisa dilihat di blog ini.
Buat menjiplaknya tidak usah Anda repot-repot mencuri source kode seperti saya, ikuti saja step by stepnya di bawah ini:
Step 1. Masuk ke Blog Anda, masuk ke opsi Template » Edit HTML.
Step 2. Cari kode </head> lalu simpan kode JQuery berikut di atasnya.
<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 kode JQuery. Versi bisa berbeda-beda seperti 1.3.2, 1.6.4, 1.7.1, dll.
Step 3. Masih dengan kode </head> , simpan kode ini diatasnya juga.
<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>
Tampilan tombol dengan kode di atas menggunakan fade in / fade out (muncul perlahan), apabila tombol ingin muncul dari bawah, ganti kode diatas 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>
Step 4. Buat Widget baru, Add a Gadget » HTML/JavaScript dan paste kode berikut:
<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/AVvXsEhQ4Km8_N7mF5eAey9mGZ3w5vvx5GVlp1hCaTWquJtQXYeNt_w2gX62zqfJKhcf0alrgFkMbbkhhZkGuVLlvHrzJIBSecSrzBgeZzQXiiwafadryoy-CH4RErpziwtw1cKLPB4xX08b_RSS/s1600/arrow-up_basic_blue.png'/></div>
Oke sekian, semoga bermanfaat dan bermartabat :D
