Tombol Back to Top dengan Efek Animasi Roket Meluncur

Cara membuat smooth back to top button dengan efek animasi roket meluncur menggunakan CSS dan jQuery ala Igniel.
Tombol Back to Top dengan Efek Roket Meluncur

Tutorial berikut berguna untuk menghias tampilan blog menjadi lebih menarik. Kalau biasanya tombol back to top hanya berupa ikon panah, maka di artikel ini akan sangat berbeda. Kita akan menggunakan ikon roket yang diberi efek meluncur ke atas.


Rocket Launch Back to Top Button Smooth Animation

1. Pastikan di blog kamu sudah terpasang library jQuery.
2. Tambahkan CSS ini DI ATAS </style> atau ]]></b:skin>.
/* Rocket Back to Top by igniel.com */
.ignielRocket svg {width:50px; height:50px; transition:all .3s ease;}
.ignielRocket svg path {fill:#008c5f}
.ignielRocket:hover svg, .ignielRocket.launch svg {transform:rotate(-45deg);}
.ignielRocket:hover svg path, .ignielRocket.launch svg path {fill:#ff5722}
.ignielRocket {visibility:hidden; opacity:0; position:fixed; right:30px; z-index:99; cursor:pointer; border-radius:100px; bottom:-30px;}
.ignielRocket.show {visibility:visible; opacity:1; bottom:30px; transition: all .5s ease;}
.ignielRocket.launch {visibility:visible; opacity:1; bottom:0px; transition: all 0s ease;}
.ignielRocket.launch:after {background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M4,10A1,1 0 0,1 3,9A1,1 0 0,1 4,8H12A2,2 0 0,0 14,6A2,2 0 0,0 12,4C11.45,4 10.95,4.22 10.59,4.59C10.2,5 9.56,5 9.17,4.59C8.78,4.2 8.78,3.56 9.17,3.17C9.9,2.45 10.9,2 12,2A4,4 0 0,1 16,6A4,4 0 0,1 12,10H4M19,12A1,1 0 0,0 20,11A1,1 0 0,0 19,10C18.72,10 18.47,10.11 18.29,10.29C17.9,10.68 17.27,10.68 16.88,10.29C16.5,9.9 16.5,9.27 16.88,8.88C17.42,8.34 18.17,8 19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14H5A1,1 0 0,1 4,13A1,1 0 0,1 5,12H19M18,18H4A1,1 0 0,1 3,17A1,1 0 0,1 4,16H18A3,3 0 0,1 21,19A3,3 0 0,1 18,22C17.17,22 16.42,21.66 15.88,21.12C15.5,20.73 15.5,20.1 15.88,19.71C16.27,19.32 16.9,19.32 17.29,19.71C17.47,19.89 17.72,20 18,20A1,1 0 0,0 19,19A1,1 0 0,0 18,18Z' fill='%23ff5722'/></svg>") no-repeat center center; background-size:30px 30px; content:''; display:block; width:30px; height:30px; transform:rotate(90deg); position:relative; text-align:center; margin:auto;}

3. Simpan HTML dan script berikut DI ATAS </body>.
<div class='ignielRocket'>
  <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
    <path d='M2.81,14.12L5.64,11.29L8.17,10.79C11.39,6.41 17.55,4.22 19.78,4.22C19.78,6.45 17.59,12.61 13.21,15.83L12.71,18.36L9.88,21.19L9.17,17.66C7.76,17.66 7.76,17.66 7.05,16.95C6.34,16.24 6.34,16.24 6.34,14.83L2.81,14.12M5.64,16.95L7.05,18.36L4.39,21.03H2.97V19.61L5.64,16.95M4.22,15.54L5.46,15.71L3,18.16V16.74L4.22,15.54M8.29,18.54L8.46,19.78L7.26,21H5.84L8.29,18.54M13,9.5A1.5,1.5 0 0,0 11.5,11A1.5,1.5 0 0,0 13,12.5A1.5,1.5 0 0,0 14.5,11A1.5,1.5 0 0,0 13,9.5Z'/>
  </svg>
</div>

<script> //<![CDATA[
  // Rocket Back to Top by igniel.com
  eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('A a=["\\i\\b\\j","\\j\\b\\c\\g\\i\\g\\b\\k","\\z\\g\\y\\k\\g\\h\\d\\x\\b\\e\\t\\h\\i","","\\e\\c\\c","\\d\\f\\I\\k\\e\\p","\\q\\h\\o\\b\\B\\h\\v\\d\\f\\c\\c","\\c\\e\\q\\b\\d\\d\\H\\b\\j","\\c\\p\\b\\E","\\f\\m\\m\\v\\d\\f\\c\\c","\\c\\e\\q\\b\\d\\d","\\D\\C\\n\\n\\j\\F","\\f\\k\\g\\o\\f\\i\\h","\\n","\\p\\i\\o\\d\\N\\R\\b\\m\\J","\\e\\d\\g\\e\\t"];r U(l){$(w)[a[Q]](r(){$(a[2])[a[1]]()[a[0]]==-K&&$(a[2])[a[6]](a[5])[a[4]]({u:a[3]});O $(w)[a[7]]()>M?$(a[2])[a[9]](a[8]):$(a[2])[a[6]](a[8])}),$(a[2])[a[L]](r(){$(V)[a[9]](a[5])[a[s]]({u:a[P]},l);$(a[T])[a[s]]({S:a[G]},l)})}',58,58,'||||||||||_0x2bf4|x6F|x73|x6C|x63|x61|x69|x65|x74|x70|x6E|_0x1aefx2|x64|x30|x6D|x68|x72|function|12|x6B|top|x43|document|x52|x67|x2E|var|x76|x31|x2D|x77|x78|13|x54|x75|x79|100|15|300|x2C|return|11|10|x62|scrollTop|14|ignielRocket|this'.split('|'),0,{}));
  ignielRocket(750);
//]]> </script>

Perhatikan fungsi ignielRocket(750). Angka 750 adalah kecepatan dari scroll halaman dan roket ketika meluncur. Kamu bisa ganti sesuai dengan keinginan. Ingat ya, kecepatannya dihitung dalam milidetik, yang artinya 750 sama dengan 0.75 detik.

Hasilnya bisa dilihat di sini.

15
Tombol Back to Top dengan Efek Animasi Roket Meluncur
Tombol Back to Top dengan Efek Animasi Roket Meluncur
Cara membuat smooth back to top button dengan efek animasi roket meluncur menggunakan CSS dan jQuery ala Igniel.
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

Artikel Terkait

15 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Rifki Subhan Arifin
    11 April, 2022
    Profil: https://draft.blogger.com/profile/15368583860644976991
    Mbak mengapa ya pada saat saya simpan itu rocket to top nya gak jalan? Mohon solusinya, makasih
  • Achmad Yadi
    23 November, 2020
    Profil: https://draft.blogger.com/profile/00477404845807900794
    ah oke
  • adelina sofyan
    19 Juli, 2020
    Profil: https://draft.blogger.com/profile/10292570377955611030
    Mengapa ya pemasangan elemen di atas tidak bekerja diterapkan pada template model baru (layout versi ke-3) mungkin harus update mbak. Makasih..
  • omnielf
    31 Januari, 2020
    Profil: https://draft.blogger.com/profile/15536807035817151293
    Akhirnya nemu blog yang berisi. Salam kenal, kang. Ijin tes rocketnya yaa.
  • Egbujor Victor Chinedu
    13 Oktober, 2019
    Profil: https://draft.blogger.com/profile/10394649788848833852
    Working like fire but i need some help here, i would like to change it's position to middle of article cos it is been covered with the Facebook messaging integration.
  • Admin
    17 September, 2019
    Profil: https://draft.blogger.com/profile/18296305630197594280
    kak izin rewrite boleh?
  • Alya
    04 September, 2019
    Profil: https://draft.blogger.com/profile/08741963154550394032
    cara buat tulisan linknya geter gitu gimana gan? yang kaya gambar diatas "igniel.com" tea
  • Hartomy okta
    23 Maret, 2019
    Profil: https://draft.blogger.com/profile/17562384696105850322
    ganti icon rocketnya gimana?
  • Agrey Tosira
    02 Januari, 2019
    Profil: https://draft.blogger.com/profile/14514416159394957177
    Thanks, Sangat Bermanfaat.
  • Azka Fadhil
    08 Desember, 2018
    Profil: https://draft.blogger.com/profile/12766248798092489234
    Apakah ada yang perlu dihapus dari kode back to top sebelumnya ?
    • Igniel
      08 Desember, 2018
      Profil: https://draft.blogger.com/profile/09199170379661896200
      Iya hapus semua kode back to top yang udah ada biar nggak bentrok.
  • A.KILLL
    21 November, 2018
    Profil: https://draft.blogger.com/profile/11857172090243587753
    Mantap mbak