Membuat Tombol Smooth Back To Top dengan Pure Javascript

Cara memasang smooth back to top di blog murni Javascript tanpa jQuery. Smooth autoscroll to top di Blogspot / Blogger / Wordpress dengan CSS dan Javascript saja.
Membuat Tombol Smooth Back To Top dengan Pure Javascript

Mungkin tutorial ini sangat pasaran. Tapi saya tetep mau nulis ini karena scriptnya bikin sendiri. Siapa tau ada yang mau pake versi saya. Scriptnya pendek aja kok, dan yang jelas ini tombol back to top pure Javascript. Nggak pake bantuan jQuery segala.

Jadi, website atau blog kamu nggak perlu tuh manggil library jQuery dulu. Biasanya jQuery dipanggil dengan menuliskan alamat https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jQuery.min.js di dalam HTML (tapi kayanya udah jarang ya ada website atau blog yang nggak pake jQuery).

Scriptnya bisa dipasang di semua platform. Baik itu Blogspot, Wordpress, dan CMS lainnya. Work di semua browser, dan nggak pake Fontawesome juga loh.

Cara Memasang Script Back To Top Pure Javascript

Berikut adalah cara pasang script smooth back to top untuk Blogspot.

1. Kode CSS

Simpan kode berikut "SEBELUM / DI ATAS" </style> atau ]]></b:skin>.
/* Back To Top Pure JS by igniel.com */
#ignielToTop {display:none;z-index:2;position:fixed;bottom:20px;right:20px;border-radius:2px;cursor:pointer;transition:all .4s;width:45px;height:45px;background:#008c5f url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center center}
#ignielToTop:hover{background:#2f303f url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center center}

2. Kode HTML dan Javascript

Simpan kode berikut "SEBELUM / DI ATAS" </body>.
<div id='ignielToTop'/>
<script> //<![CDATA[
/* Back To Top Pure JS by igniel.com */
var igniel_kecepatan = 300; //kecepatan scroll
var igniel_jarak = 300; //posisi munculnya tombol
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}('f 7=["\\h\\a\\g\\h\\F","\\C\\h\\w\\c\\a\\a\\l\\c\\v","\\e\\c\\h\\K\\p\\9\\d\\b\\m\\a\\9\\p\\9\\d\\b","\\G\\c\\e\\q","\\J\\e\\e\\m\\I\\9\\d\\b\\H\\g\\C\\b\\9\\d\\9\\w","\\g\\u\\d\\g\\9\\a\\l\\c\\l\\c\\v","\\u\\9\\b\\m\\a\\9\\p\\9\\d\\b\\M\\q\\U\\e"];8[7[6]](7[5])[7[4]](7[0],j x(){f i=8[7[2]][7[1]]||8[7[3]][7[1]];o(k<=0){s};f r=0-i;f t=r/k*X;L(j(){8[7[3]][7[1]]=8[7[2]][7[1]]=i+t;o(i==0){s};x(8[7[3]],0,k)},P)},Q);B.Y(\'O\',j(){o(B.N>=n||8.R.z>=n||8.W.z>=n){8.y(\'A\').E.D=\'V\'}T{8.y(\'A\').E.D=\'S\'}});',61,61,'|||||||_0x3e17|document|x65|x6C|x74|x6F|x6E|x64|var|x69|x63|_0x2ceax2|function|igniel_kecepatan|x54|x45|igniel_jarak|if|x6D|x79|_0x2ceax3|return|_0x2ceax4|x67|x70|x72|ignielScroll|getElementById|scrollTop|ignielToTop|window|x73|display|style|x6B|x62|x4C|x76|x61|x75|setTimeout|x42|pageYOffset|scroll|10|false|documentElement|none|else|x49|block|body|50|addEventListener'.split('|'),0,{}));
//]]></script>

3. Ganti Scriptnya Sesuai Selera

Perhatikan kode diatas dan fokus pada angka yang di-highlight. Kamu bisa mengganti angkanya dan sesuaikan dengan selera masing-masing. Cukup ganti angkanya aja, lainnya nggak usah.
  1. var igniel_kecepatan
    Kecepatan scroll. Semakin kecil angkanya, maka proses scroll back to top akan semakin cepat.
  2. var igniel_jarak
    Posisi munculnya tombol. Pada contoh diatas, angka yang tertulis adalah 300. Artinya, tombol back to top akan muncul ketika halaman sudah ter-scroll / bergulir kebawah sepanjang 300px.

Sekian tutorial simple kali ini tentang cara memasang tombol back to top di blog. Jangan lupa share dan kasih komen pake akun asli untuk artikel ini. Good luck.
4
Membuat Tombol Smooth Back To Top dengan Pure Javascript
Membuat Tombol Smooth Back To Top dengan Pure Javascript
Cara memasang smooth back to top di blog murni Javascript tanpa jQuery. Smooth autoscroll to top di Blogspot / Blogger / Wordpress dengan CSS dan Javascript saja.
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

Artikel Terkait

4 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.
  • Wanakerta
    18 Februari, 2019
    Profil: https://www.blogger.com/profile/04626984707995181600
    maaf mbak kok setelah saya coba diblog saya tombol back to top nya gak muncul. padahal saya sudah mengikuti petunjuknya dengan benar. trimakasih
  • Lokerntb
    09 Februari, 2018
    Profil: https://www.blogger.com/profile/02846669987131502789
    Tapi kalau pengguna kita umumnya smartphone, sepertinya widget ini tidak terlalu berfungsi. Karena mereka cukup geser screennya saja lagnsung cus ke atas
    • Igniel
      09 Februari, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Kalau tulisannya panjang, swipe keatasnya pegel. Kalau pake ini langsung nyampe.
  • Eirudo
    06 September, 2017
    Profil: https://www.blogger.com/profile/14009731569369244433
    Dulu menganggap remeh ama widget satu ini.

    Tapi seiring perjalanan waktu, baru kerasa kalo ini butuh banget.
    palagi setelah baca postingan super panjang. Pas mo balik keatas, pegel scrollnya duluan :")