Membuat Tombol Back To Top Dengan Efek Bounce/Memantul

Primonymous - Halo! hari ini Primonymous akan berbagi cara untuk Membuat Tombol Back To Top Dengan Efek Bounce/Memantul. Jadi saat kita klik tombol back to top, otomatis tampilan blog kita akan menjadi ke atas dan efek 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 kode JQuery di bawah kode </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 kode JQuery

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

Keterangan:
Kode di atas berfungsi untuk membuat efek 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 kode 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/AVvXsEiNUjCvcjPlx5Y2osTl4P-2Gykpu-XW4fEjZAal1WdlPLQvMXJD3-ygaNUfHcZonVDBoO3n4wVvB_Iva709t2uMFubJGZtGrh0JMcPrOY6JBOJJ37qJ6YDqp7SodQdBpCG7biDT8qMAMYov/s1600/arrow-up_basic_blue.png'/></div>

7. Simpan widget

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

Tweet

Subscribe to receive free email updates: