Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Membuat Tombol Back to Top dengan Efek Bounce

Membuat tombol scrol back to top dengan efek memantul (bounce)
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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw9T-erWuNlvwhJCzQQZx8KJiQf2ROCf_Wd5vK_slb6Jje2rGuUvDHaFPulE7GmULW5rN6H_0KlEQiGk_oTvHZP7Sv3ybfokRi2mtH2lnkMowY3R59DFqZJE512QU-FsGqSgzV0NSLf2Hg/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....

Untuk mendapatkan update terbaru di Dasbor Blogger, silahkan ikuti Blog ini

131 komentar

1. Komentar ini, diurutkan dari yang terbaru
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
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. Jadi dengan ini tombolnya bisa gedek-gedek ya kang hehehehe.....
    1. wkwkwkwk... pas naiknya kang, bukan tombolnya :)
    2. 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 -___-"
  2. hohoho tombol keren kang ... untuk kapayuna urang raosan ah hehe
    1. tambih kopina kang :)
  3. hehehe pas nih buat di praktekkin hehehe inovasinya mantab gan ane hanya bisa mlongo dan follow tutorial dari agan hehehe makasih ya gan
    1. awas laler masuk mulut kalo mlongo :D
  4. mantap kang keren euy widget BTT na
    1. terima kasih mas aelx hehe :D
    2. kang alex kamana wae...
  5. 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
    1. Betul kang Ismet ...sangat di tunggu entar kalau janda sebelah ada yang nanya ngarahinya kan kesini..he he
  6. Jadi tidak perlu scrool lagi ya mas tinggal klik back to top langsung naik keatas :)
    1. iya sob.. auto scroll gitu deh
  7. maap kang OOT, saya mau nanya gimana buat breadcrumb tanpa ngeganti permanlink di hasil penelusuran google :D
    1. maksudnya ganti permalink gimana ya?
  8. udah lama tak mengunjungi blog ini, tambah keren aja :D
    1. makasih sob
  9. wah..
    bisa makin keren ini bisa mantul mantul.. :D
    1. :) kaya bola ya
  10. Ah, ikut pake ah.....
  11. Keren Kang.
    1. makasih sob :D
  12. di blog saya udah ada back to top, tapi gk tau ada eefek bounce nya ato nggk? gk ngerti kang. NICe Share
    1. ga pake itu sob...kalo pake pasti ada pantulan :)
  13. baik bgt ampe dbikinin artikelnya dsini..he..he
    makasih mas Ismet :)
    1. sama2 jeng.. btw blognya mana ya?
  14. trik baru kang, saya simpan scriptnya ah, makasih kang sudah berbagi.
    1. sama2.. silahkan dikantongin :)
  15. 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
    1. betul sob.. silahkan dipasang
  16. Tambah menarik buat tombol ke atas yang disajikan Kang Ismet di sini
    1. hehehe sama aja sama yang lain ko sob :)
  17. makasih gan sudah share artikelnya bagus..
    1. sama2 gan
  18. Hihi bisa ntul-ntul ya mas ... :D
    1. sundul gannnnn.....
  19. memang tutorial ini keren kang, jalan scoll keatas pun cukup terkesan mulus, mantap deh, udah saya terapkan di blog saya, TQQ.. |o|
    1. congratz deh jeng :)
  20. 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
    1. yang mana ya? perasaan say buat v.3 :)
  21. indona mah bounce teh tuing-tuing :))
    1. twewewew gejlig nya kang :)
  22. demo nya mana gan?
  23. 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.
    1. coba tambahkan kode ini kedalam css gan #ContactForm1{display:none}
  24. 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?
    1. waduh.. saya belum ngerti masalah blocked url :(
  25. whiee.. jd kyk halaman google grup, memantul haha.. ijin dl save kang
  26. Ijin coba kang ...
    Biar greget ... :v
  27. makasih mas tutorialnya...bermanfaat banget buat saya. salam kenal
  28. weist z-index bagian footer nya ++ nih ! widget sticky nya jadi nusuk background footer! mantap kang .. nurutan ahh :D
  29. Mantep udh saya terapin kang.
    ckup hnya mnggnti .animate durasi pada script saya sebelumnya :)
    1. kalau sudah ada, tinggal ganti yang itu sih :-bd
  30. boleh d coba nih kang :D
  31. keren juga :) udah lama ga mampir, makin eksis aja blognya kang :)
  32. wew keren kang, ane mau nyoba ^_^
    tutornnya mantab\

    semoga sehat selalu kang!

    #salam hangat dari STAR-US
  33. mantap kang tutorialnya lansung di coba..
  34. Ajaib Infonya Kang Ismet
  35. Maksudnya Efek "Bounce" itu apa y gan ? Ane bingung nih gan :v
    1. goyang dombret... :) coba aja klik back to top blog ini
  36. kang, kalo pengen ngatur speed nya gmn yah ??
    1. coba edit .animate({scrollTop:0},800)
  37. Mantap, baru tahu ada efek bounce gitu, makasih tutorialnya kang. Sudah saya pasang di blog saya.
    1. sama2 sob...
  38. 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,, .
    1. betul kang.. lebih memudahkan pengguna
  39. Akang saya mau ikutan script yang ini yah (minta ijin sedot scriptnya akang)

    Haturnuhun Sebelumnya
    1. manggasok sedot we lah :)
  40. Wih Keren Tutorialnya
    ada efek bouncenya
  41. Lucu kang pas nyoba Scrpll blog ini ... bagoyang .. :D nice lah kang ...
    1. wkwkw.. goyang dombret :)
  42. Makasih Kang.... Gracias!!
  43. tks infonya ,kalo ada waktu silahkan mampir ke lovewebster.blogspot.com
  44. Sudah saya coba dan berhasil...!
  45. Ziiippp gan
  46. ijin terapin gan
    visit back: http://aani-naruto.blogspot.com/
  47. kang tanya dong, klo buat smooth scroll kebawah saat publish komentar gimana kang.., makasih sebelumnya..
  48. semangat belajar para calon blogger profesional
    http://stabilou.blogspot.com
    1. yupp bener skeali mas ..
  49. Walah kang, ini sama aja kaya belajar di w3 :D lebih gampang belajar dari sini :D
  50. makasih kang ;) udah ane praktekin
  51. thanx kang atas infonya.
    sudah saya aplikasikan ke blog saya. :D
  52. kang, kenapa tombolnya cuman keluar saat di halaman utama, saat di postingan gak keluar?? -_-
  53. 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
  54. keren nih boleh di coba terimakasih kangismet :)
  55. Thanks kang,udh terpasang. :)
  56. WOW :)
  57. 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
  58. Work lagiiiii, mantap! haturu nuhun Kang Ismet :D
  59. 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
  60. Unknown
    Komentar ini telah dihapus oleh pengarang.
  61. bookmark dolo ahhhhhhhh :D
    mantap kang :D sangat berguna
    ada tukar link gak kang? :D
    kunjungan balik gan
  62. nice your posting. good job
  63. keren bang... mohon ijin di pake di blog saya
  64. Gracias kang Ismet, perobaannya berhasil. Sekrang blog saya jadi lebih friendly. Maksih mas bro, mau bagi2 ilmu.
  65. omm kalo pengen posisi tombolnya di pinggir kanan tengan gimana ya? kalo yang di tutor ini kan posisi tombolnya di kanan bawah... ^_^
  66. makasi ya mas tutornyaa, google plus banget buttonnya ^_^
  67. Ane udah terapi di blog ane...hasilnya mantap. Thanks Kang...
  68. Kang kalo buntuk wordpress gimana?
  69. Keren Tutorialnya kang :)
    Semoga bisa saya terapkan dilain waktu.
    Jika berkenan, kunjungi http://coretan-kemal.blogspot.com
  70. keren kang., udah saya praktekin n sukses., (^_^)
  71. udah dcb dan hasilnya memuaskan
  72. Terimakasih mas..
  73. silahkan kunjungi di resep.infoguna.com
    kumpulan resep makanan
  74. tak coba dulu mas
  75. Makasih mas |o|
  76. ma kasih kang,...
  77. terimakasih kang .... :D
  78. keren gan ty
    yang mau tau cara gratis internetan mampir ke sini : http://indosharings.blogspot.com/
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.