PopAds.net - The Best Popunder Adnetwork

Cara Membuat Back To Top Dengan Efek Bounce

 

Langsung Aja menuju ke TKP!
1. Buka Blog Sobat
2. Pilih Template
3. Pilih edit Template
4. Simpan jQuery di atas kode </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. Simpan kode di bawah ini tepat di atas 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, simpan kode di bawah 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/AVvXsEi5T3ebP2mMyCzCnBIXJelunS_SIYpphXAqgToJ9q8Ye1uug9Fnj8GGcWhNQUIM2kWj-co5uqHX9PG6seHI0G-jEl9sJzJMeHng0CyDhky4sUHUzsRVx8lFh6C7Xw10p_O71r5RsAU513vS/s1600/arrow-up_basic_blue.png'/></div>
Tampilan tombol dengan kode di atas menggunakan fade in / fade out (muncul perlahan), apabila tombol ingin muncul dari bawah, ganti kode pada langkah 5 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>
Sekian Tutorial Hari Ini, Semoga Bermanfaat Bagi Kalian Semua

Kode Emoticon Untuk Komentar :


:a :b :c :d :e :f :g :h :i :j :k :l :m :n :o :p :q :r :s :t
Mau Emoticon Ini? Klik Disini

1 komentar:

Peraturan Berkomentar Di Blog Ini :

» Berkomentarlah dengan baik dan sopan.
» Dilarang spam, sara, junk.
» Jangan membuat keributan/kekacauan.
» Jangan mencantumkan LIVE LINK di komentar ini.
» Jika ingin copy-paste dari blog ini ke blog kamu silahkan aja.

Terima kasih atas pengertiannya.