Cara Pasang Tombol Back To Top Dengan Efek Bounce Keren

Unknown

Tutorial

Kamis, 20 Februari 2014

Belum ada komentar

Cara Pasang Tombol Back To Top Dengan Efek Bounce Keren di Blog - Kali ini Blog ZIANT SHADY akan share cara bagimana membuat tombol back to top dengan menggunakan efek Bounce, sesuai dengan namanya "Bounce" yang akan memberikan efek melompat keatas dan akan ada efek memantul saat sudah sampai atas.

Tombol Back To Top dengan efek Bounce ini juga saya gunakan pada Blog ini sendiri, sehingga Blog ini terlihat unik, silahkan simak artikel ini jika ingin memasangnya pada Blog sobat atau hanya ingin sekedar mempelajarinya.

Cara Pasang Tombol Back To Top Dengan Efek Bounce Keren

1. Letakan jQuery ini diatas </head>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js'/>

Note: Jika sebelumnya sudah terdapat jQuery, maka lewati saja step ini

2. Letakan kode dibawah ini 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>

3. Buat widget HTML/Javascript lalu isikan dengan kode dibawah

<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/AVvXsEj87PkJTnQ8LracpKVbpHZU8hIWGGBZCF2QEpM9cv6ISG-7f5vnzlSDRoG1P5hXZXdWvzXHvvBCR-pGloZMIsdbV_fQJGHk2r6ktUt8SYNk3m1HMzhbDqLEaxRsasBBefRgysDlkz7IiqI/s1600/arrow-up_basic_blue.png'/></div>

4. Simpan dan lihatlah hasilnya

Note: URL https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj87PkJTnQ8LracpKVbpHZU8hIWGGBZCF2QEpM9cv6ISG-7f5vnzlSDRoG1P5hXZXdWvzXHvvBCR-pGloZMIsdbV_fQJGHk2r6ktUt8SYNk3m1HMzhbDqLEaxRsasBBefRgysDlkz7IiqI/s1600/arrow-up_basic_blue.png gambar ini bisa diganti sesuai keinginan sobat.

Sekian artikel mengenai Tombol Back To Top Dengan Efek Bounce Keren ini, semoga bermanfaat...