Membuat Tombol Back To Top Dengan Dampak Bounce/Memantul

- Halo! hari ini akan membuatkan cara untuk Membuat Tombol Back To Top Dengan Efek Bounce/Memantul. Kaprikornus saat kita klik tombol back to top, otomatis tampilan blog kita akan menjadi ke atas dan pengaruh memantul akan muncul saat sudah sampai atas. Ok langsung saja disimak cara memasangnya

1. Log-in ke Blogger
2. Masuk ke Template >> Edit HTML
3.. Simpan isyarat JQuery di bawah isyarat </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-mu sudah ada isyarat JQuery

4. Salin dan letakkan isyarat berikut di bawah isyarat </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>

Keterangan:
Kode di atas berfungsi untuk membuat pengaruh fade in/fade out (muncul secara perlahan), jika ingin membuatnya muncul dari bawah silahkan ganti dengan kode:

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

5. Simpan template
6. Buat widget baru HTML/Javascript (Tata Letak >> Tambah Widget >> HTML/Javascript) dan masukkan isyarat 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/AVvXsEhLWz-TZdj_noIeeb8Bh192h5BkzWIMFx-Sp_rVLPsC6xsT3HxE_BnswN5azKNlTPnnrNToUgaVLW1XMT_UC1gYt-bFfRUsiN5M5lv0SJwOGmdEOo2jTxI2Ju8RqDMT8vaP0jqlRH_ZUavR/s1600/arrow-up_basic_blue.png'/></div>

7. Simpan widget

Sekian artikel wacana Membuat Tombol Back To Top Dengan Efek Bounce semoga bermanfaat ...

Bagikan Artikel ini