Membuat Tombol Back to Top Dengan Efek Bounce

Unknown

jQuery, Widget

30 Okt 2013

3 Komentar

Membuat Tombol Back to Top Dengan Efek Bounce - Pada postingan kali ini saya akan memposting artikel yang cukup menarik sekaligus widget yang mempermudah visitor mengembalikan scroll ke atas, yaitu Membuat Tombol Back to Top Dengan Efek Bounce.

Sebenarnya saya sudah membuat postingan ini dengan tema yang sama, yaitu Cara Mudah Membuat Back To Top di Blog namun pada postingan ini saya akan mendaur ulangnya kembali atau memodifikasinya dengan efek bounce. Sedikit penjelasan, bounce artinya memantul, jadi back to top setelah discroll akan ada sedikit efek pantulan. Untuk melihat langsung demonya, silahkan Anda terapkan sendiri pada blog ini. Oke langsung saja ini dia tutorialnya:

1. Masuk ke Blogger
2. Pilih Template > Edit Html
3. Cari kode </head>
4. Setelah ketemu, pastekan jQuery berikut diatas </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. Masih simpan kode berikut diatas 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>

6. Buat widget baru HTML/JavaScript, dan pastekan 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/AVvXsEiDvOWyl0ZmlLrDjEDgOGeaCi2c93PkcmtGduHgD08RtOWmr9ax4ZspBgvgDuEoOPfxNgsucDeEkozcPI6EOXQfhnksp5PYXyn5rkyUVOqHdBIyV_5L5zeRwXC1cdYVzuuQfvp0kwvZcsON/s1600/Button-Upload-icon.png'/></div>

7. Simpan Template..

Sekian tutorial mengenai Membuat Tombol Back to Top Dengan Efek Bounce, Semoga bermanfaat..