Membuat Tombol Back to Top dengan Efek Bounce

Sebelum melangkah pada tutorial, saya mengucapkan terimakasih kepada pengunjung blog ini, karena dengan berbagai pertanyaan memunculkan ide untuk membuat artike baru.
Lanjut kepada tutorial... Apa sebenarnya efek bounce itu? bounce artinya memantul, jadi back to top setelah discroll akan ada sedikit efek pantulan. Untuk menerapkannya, silahkan ikuti langkah mudahnya :
Langkah 1 : Simpan kode jQuery di atas
</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.
Langkah 2 : Simpan kode ini masih di atas
</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>
Langkah 3 : Buat widget baru HTML/JavaScript, simpan 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='http://2.bp.blogspot.com/-MFhU3vLp5ho/UiaBZeA1McI/AAAAAAAAAQs/MrzW2ljP5mA/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 seperti blog ini, ganti kode pada langkah 2 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>
Apabila sobat ingin tombol scroll back to top tanpa efek bounce, kunjungi tutorianya DISINI.
Semoga bermanfaat....
133 komentar
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
5. Untuk menghapus komentar, geser kursor ke sebelah kanan komentar Anda.
image quote pre code
yang mau tau cara gratis internetan mampir ke sini : http://indosharings.blogspot.com/
kumpulan resep makanan
Semoga bisa saya terapkan dilain waktu.
Jika berkenan, kunjungi http://coretan-kemal.blogspot.com
mantap kang :D sangat berguna
ada tukar link gak kang? :D
kunjungan balik gan
Kiri seperti ente sob ? Kunjungan balik Ditunggu yaa sob di blog sederhana saya
ini ray-software.blogspot.com Terima kasih :) :-bd
Ijin numpank BLog Masta n Sukses slalu bwt anda n BLogx,. :)
http;//mybroki.blogspot.com
sudah saya aplikasikan ke blog saya. :D
http://stabilou.blogspot.com
visit back: http://aani-naruto.blogspot.com/
ada efek bouncenya
Haturnuhun Sebelumnya
Kang Ismet posting, bila kembali keatas cukup
klik satu kali langsung keatas. terima kasih atas share
nya Kang,, .
tutornnya mantab\
semoga sehat selalu kang!
#salam hangat dari STAR-US
ckup hnya mnggnti .animate durasi pada script saya sebelumnya :)
Biar greget ... :v
cara ngatasin BLOCKED URL yah? soalnya gini, stiap kali sy fetch google, blocked URL sy langsung brmbh, gk tau knp! skrng nih sy udh punya 60 artikel, dn BLOCKED URL saya ada 60 Juga.
ada solusi gak? atau yg kyk gituan gk ada masalah?
gmana caranya nyembunyiin widget contact form.? Soalnya aku pake' tips mas yg www.blog.kangismet.net/2013/05/memasang-widget-contact-form-blogger.html
tpi tetap widgetnya gk sembunyi.
Oiya aku juga pake template zikazev blue.
mohon bantuanya mas.
Btw, skalian numpang tanya...cara ganti warna biru telur asin yang membungkus banner di template iklanbaris v.4 itu, codenya yang mana ya kang?
Terus...ukuran gambar untuk setiap postingan iklan maksimal brapaan px?
Lagi iseng buat blog iklan baris nih :p
Thx sblmnya kang Ismet
makasih mas Ismet :)
bisa makin keren ini bisa mantul mantul.. :D
1. Validasi Comment Hack - ini berguna banget bagi validasi HTML5 postingan blog kang, pasti banyak dicari sama blogger2 lain kang.... Sudah ada beberapa yg nanya untuk validasi postingan. Dengan ini kan saya jadi gampang mengarahkannya (saya tidak ada hak untuk mempostingnya karena ini hasil jerih payah kang Ismet)
2. Validasi HTML5 untuk jump-link - masih berharap hehehhe...
3. Breadcrumb valid HTML5 (sebagai bagian dari validasi HTML5 postingan.
Hehehehe... :D :D
btw kang, kenapa ya saya masukin di atas [code]</head>[/code] ga mau keluar, tapi saya masukin di atas [code]</body>[/code] baru bisa keluar. Bingung -___-"