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.- var igniel_kecepatan
Kecepatan scroll. Semakin kecil angkanya, maka proses scroll back to top akan semakin cepat. - 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.
