Tombol Back to Top dengan Efek Animasi Roket Meluncur

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.

Artikel Terkait

15 komentar

Ikuti format penulisan berikut untuk menyisipkan elemen tambahan.
  • Menulis kode gunakan <i>kode</i>
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em>
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong>
  • Rifki Subhan Arifin
    11/4/22
    Profil: https://www.blogger.com/profile/15368583860644976991
    Mbak mengapa ya pada saat saya simpan itu rocket to top nya gak jalan? Mohon solusinya, makasih
  • Achmad Yadi
    23/11/20
    Profil: https://www.blogger.com/profile/00477404845807900794
    ah oke
  • adelina sofyan
    19/7/20
    Profil: https://www.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/1/20
    Profil: https://www.blogger.com/profile/15536807035817151293
    Akhirnya nemu blog yang berisi. Salam kenal, kang. Ijin tes rocketnya yaa.
  • Egbujor Victor Chinedu
    13/10/19
    Profil: https://www.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/9/19
    Profil: https://www.blogger.com/profile/18296305630197594280
    kak izin rewrite boleh?
    • Igniel
      17/9/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Boleh. Cantumkan sumbernya ya.
  • Alya
    4/9/19
    Profil: https://www.blogger.com/profile/08741963154550394032
    cara buat tulisan linknya geter gitu gimana gan? yang kaya gambar diatas "igniel.com" tea
  • Hartomy okta
    23/3/19
    Profil: https://www.blogger.com/profile/17562384696105850322
    ganti icon rocketnya gimana?
    • Anonim
      Anonim 1/10/19
      iya gimana nih ganti warna rocketnya
    • Igniel
      1/10/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      .ignielRocket svg path {fill:#008c5f}
  • Agrey Tosira
    2/1/19
    Profil: https://www.blogger.com/profile/14514416159394957177
    Thanks, Sangat Bermanfaat.
  • Azka Fadhil
    8/12/18
    Profil: https://www.blogger.com/profile/12766248798092489234
    Apakah ada yang perlu dihapus dari kode back to top sebelumnya ?
    • Igniel
      8/12/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Iya hapus semua kode back to top yang udah ada biar nggak bentrok.
  • A.KILLL
    21/11/18
    Profil: https://www.blogger.com/profile/11857172090243587753
    Mantap mbak