back to topBack to Top Button with Bounce Effect - Sebenarnya sudah banyak tutorial untum membuat tombol back to top ini, namun ada pertanyaan pengunjung blog ini tentang bagaimana cara 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....

136 komentar

Jadi dengan ini tombolnya bisa gedek-gedek ya kang hehehehe.....

Balas

wkwkwkwk... pas naiknya kang, bukan tombolnya :)

Balas

memang sudah banyak tutorialnya kang ismet tapi jika kita melihatnya dengan baik scriptnya sangat simple dan praktis untuk digunakan :-d

Balas

hohoho tombol keren kang ... untuk kapayuna urang raosan ah hehe

Balas

OOhhh pas nyampe atas jadi tul pantul ya kang hehehe....

Balas

hehehe pas nih buat di praktekkin hehehe inovasinya mantab gan ane hanya bisa mlongo dan follow tutorial dari agan hehehe makasih ya gan

Balas

mantap kang keren euy widget BTT na

Balas

iya mas andi sialnya back to topnya sepupu sama bola pimpong mas :D :D

Balas

terima kasih mas aelx hehe :D

Balas

Sebagai bahan postingan ke depan kang hehehe...
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

Balas

Jadi tidak perlu scrool lagi ya mas tinggal klik back to top langsung naik keatas :)

Balas

maap kang OOT, saya mau nanya gimana buat breadcrumb tanpa ngeganti permanlink di hasil penelusuran google :D

Balas

udah lama tak mengunjungi blog ini, tambah keren aja :D

Balas

wah..
bisa makin keren ini bisa mantul mantul.. :D

Balas

Betul kang Ismet ...sangat di tunggu entar kalau janda sebelah ada yang nanya ngarahinya kan kesini..he he

Balas

di blog saya udah ada back to top, tapi gk tau ada eefek bounce nya ato nggk? gk ngerti kang. NICe Share

Balas

baik bgt ampe dbikinin artikelnya dsini..he..he
makasih mas Ismet :)

Balas

trik baru kang, saya simpan scriptnya ah, makasih kang sudah berbagi.

Balas

awas laler masuk mulut kalo mlongo :D

Balas

Siiiip.. nuhun kasadayana,yang pasti buat Kang Adhy masih bingung no 2 :)

Balas

iya sob.. auto scroll gitu deh

Balas

maksudnya ganti permalink gimana ya?

Balas

ga pake itu sob...kalo pake pasti ada pantulan :)

Balas

sama2 jeng.. btw blognya mana ya?

Balas

sama2.. silahkan dikantongin :)

Balas

blm bikin mas.. skrg br mau, lg bingung milih'' templatenya ni..
kmrn smpat ad wordpress tp dh aku apus, skrg mo nyicipin blog rasa blogger hehe

Balas

Yuhuiiii, ini yang sekarang sedang saya cari kang :D, rasanya kurang lengkap jika belum anda tombol back to top nya :D tapi sekarang mau pakai :D , hehehe

Balas

biasa kang si akang eta mah sibuk ngekeupan ae blogna .. hehe

Balas

Tambah menarik buat tombol ke atas yang disajikan Kang Ismet di sini

Balas

makasih gan sudah share artikelnya bagus..

Balas

betul sob.. silahkan dipasang

Balas

hehehe sama aja sama yang lain ko sob :)

Balas

Hihi bisa ntul-ntul ya mas ... :D

Balas

hahhhahha hampura kasadayana biasa kang sibuk milarian sesuap berlian hehhe

Balas

memang tutorial ini keren kang, jalan scoll keatas pun cukup terkesan mulus, mantap deh, udah saya terapkan di blog saya, TQQ.. |o|

Balas

Bagus banget efek tombolnya. Izin coba ya kang :)
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

Balas

indona mah bounce teh tuing-tuing :))

Balas

twewewew gejlig nya kang :)

Balas

yang mana ya? perasaan say buat v.3 :)

Balas

Udah ketemu kang Ismet.
Maksud saya juga v.3 ..jadi salah ketik v.4 tuh :D
Trims banget template iklannya bagus banget.

Balas

mas maaf kalo OOT.

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.

Balas

permisi nih kang. mau nanya doank nih,
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?

Balas

coba tambahkan kode ini kedalam css gan #ContactForm1{display:none}

Balas

whiee.. jd kyk halaman google grup, memantul haha.. ijin dl save kang

Balas

iyaa..
heheu..
pengen edit, tapi masih belum paham benar masalah coding.. :)

btw, kok kang ismet jarang blogwalking ke tempat saya ya.. :p

Balas

wkwkwkw..bener, pas dicobain gedek-gedek #wkwkwk

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 -___-"

Balas

dua tempat itulah penempatannya.. emang kadang2 seperti itu, mungkin keduluan sama script lain :)

Balas

waduh.. saya belum ngerti masalah blocked url :(

Balas

Ijin coba kang ...
Biar greget ... :v

Balas

makasih mas tutorialnya...bermanfaat banget buat saya. salam kenal

Balas

weist z-index bagian footer nya ++ nih ! widget sticky nya jadi nusuk background footer! mantap kang .. nurutan ahh :D

Balas

Mantep udh saya terapin kang.
ckup hnya mnggnti .animate durasi pada script saya sebelumnya :)

Balas

kalau sudah ada, tinggal ganti yang itu sih :-bd

Balas

iya nih, saya juga ngalamin masalah yang sama!! :(

Balas

keren juga :) udah lama ga mampir, makin eksis aja blognya kang :)

Balas

wew keren kang, ane mau nyoba ^_^
tutornnya mantab\

semoga sehat selalu kang!

#salam hangat dari STAR-US

Balas

mantap kang tutorialnya lansung di coba..

Balas

Maksudnya Efek "Bounce" itu apa y gan ? Ane bingung nih gan :v

Balas

kang, kalo pengen ngatur speed nya gmn yah ??

Balas

goyang dombret... :) coba aja klik back to top blog ini

Balas

coba edit .animate({scrollTop:0},800)

Balas

Mantap, baru tahu ada efek bounce gitu, makasih tutorialnya kang. Sudah saya pasang di blog saya.

Balas

Enakan yah Kang kalau pakai cara pakai yang
Kang Ismet posting, bila kembali keatas cukup
klik satu kali langsung keatas. terima kasih atas share
nya Kang,, .

Balas

betul kang.. lebih memudahkan pengguna

Balas

Iya betul Kang Mantep pisan pokok na mah
Siip hatur nuhun nya Kang ..?

Balas

Akang saya mau ikutan script yang ini yah (minta ijin sedot scriptnya akang)

Haturnuhun Sebelumnya

Balas

manggasok sedot we lah :)

Balas

Hehehe Haturnuhun Kang Scriptnya sukses :D rada di ganti image panahnya

Semoga sehat selalu kang, Aamiiin...

Balas
Komentar ini telah dihapus oleh pengarang.

Wih Keren Tutorialnya
ada efek bouncenya

Balas

Lucu kang pas nyoba Scrpll blog ini ... bagoyang .. :D nice lah kang ...

Balas

wkwkw.. goyang dombret :)

Balas

Ane comot ah ... buat nambah artikel :D ... kapan2 mampir kalo sempet :P .

Ane banyak berguru dari sini ... Nice share selalu kang ismet .

Balas

Makasih Kang.... Gracias!!

Balas

tks infonya ,kalo ada waktu silahkan mampir ke lovewebster.blogspot.com

Balas

Sudah saya coba dan berhasil...!

Balas

ijin terapin gan
visit back: http://aani-naruto.blogspot.com/

Balas

kang tanya dong, klo buat smooth scroll kebawah saat publish komentar gimana kang.., makasih sebelumnya..

Balas

semangat belajar para calon blogger profesional
http://stabilou.blogspot.com

Balas

belajar adalah modal untuk kita menjadi jempolan mbk
slm kenal mbk Friska Lee

Balas

Walah kang, ini sama aja kaya belajar di w3 :D lebih gampang belajar dari sini :D

Balas

makasih kang ;) udah ane praktekin

Balas

thanx kang atas infonya.
sudah saya aplikasikan ke blog saya. :D

Balas

kang, kenapa tombolnya cuman keluar saat di halaman utama, saat di postingan gak keluar?? -_-

Balas

hehe saya pasang kode yang kedua, diatas /head gak berhasil, tapi pas coba pasang diatas /body malah berhasil kang. hehe but, makasih banyak yah kang tutorialnya :D

Balas

keren nih boleh di coba terimakasih kangismet :)

Balas

Thanks kang,udh terpasang. :)

Balas

MLm Gan,. :) ijin pasang Sob n post yg sangat bermanfa'at bwt Pemula Seperti MyBroki.
Ijin numpank BLog Masta n Sukses slalu bwt anda n BLogx,. :)
http;//mybroki.blogspot.com

Balas

Work lagiiiii, mantap! haturu nuhun Kang Ismet :D

Balas

Mantab sob :) Sangat Berguna .. Oiya sob . gmana cara ngasi menu Kayak di bagian
Kiri seperti ente sob ? Kunjungan balik Ditunggu yaa sob di blog sederhana saya
ini ray-software.blogspot.com Terima kasih :) :-bd

Balas
Komentar ini telah dihapus oleh pengarang.

bookmark dolo ahhhhhhhh :D
mantap kang :D sangat berguna
ada tukar link gak kang? :D
kunjungan balik gan

Balas

mantaf kang postingan nya langsung di coba hehe

Balas

keren bang... mohon ijin di pake di blog saya

Balas

Gracias kang Ismet, perobaannya berhasil. Sekrang blog saya jadi lebih friendly. Maksih mas bro, mau bagi2 ilmu.

Balas

omm kalo pengen posisi tombolnya di pinggir kanan tengan gimana ya? kalo yang di tutor ini kan posisi tombolnya di kanan bawah... ^_^

Balas

makasi ya mas tutornyaa, google plus banget buttonnya ^_^

Balas

Ane udah terapi di blog ane...hasilnya mantap. Thanks Kang...

Balas

Kang kalo buntuk wordpress gimana?

Balas

Keren Tutorialnya kang :)
Semoga bisa saya terapkan dilain waktu.
Jika berkenan, kunjungi http://coretan-kemal.blogspot.com

Balas

keren kang., udah saya praktekin n sukses., (^_^)

Balas

udah dcb dan hasilnya memuaskan

Balas

silahkan kunjungi di resep.infoguna.com
kumpulan resep makanan

Balas

terimakasih kang .... :D

Balas

keren gan ty
yang mau tau cara gratis internetan mampir ke sini : http://indosharings.blogspot.com/

Balas

makasih info-nya

http://adutburza.blogspot.com/
www.giribig.com

Balas

makasih gan atas info yang bermanfaat ini

blog saya http://ar-klopedia.blogspot.com/
vacation http://www.indomytravelling.com/

Balas

Poskan Komentar


×
Chat