06 September, 2017

Membuat Tombol Smooth Back To Top dengan Pure Javascript

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" </style> atau ]]></b:skin>
/* Back to top ala Igniel */
#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" </body>
<div id='ignielToTop'/>
<script type='text/javascript'>
//<![CDATA[
(function() {
var igniel_kecepatan = 300; //kecepatan scroll
var igniel_jarak = 300; //posisi munculnya tombol

eval(function(p,a,c,k,e,r){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--)r[e(c)]=k[c]||e(c);k=[function(e){return r[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}('W.19=R(){U(W.1k>=V||S.1c.X>=V||S.1i.X>=V){S.Y(\'Z\').11.12=\'1j\'}13{S.Y(\'Z\').11.12=\'1n\'}};18(R(p,a,c,k,e,r){e=R(c){T(c<a?\'\':e(1a(c/a)))+((c=c%a)>1b?14.1d(c+1e):c.1f(1g))};U(!\'\'.15(/^/,14)){16(c--)r[e(c)]=k[c]||e(c);k=[R(e){T r[e]}];e=R(){T\'\\\\w+\'};c=1};16(c--)U(k[c])p=p.15(1l 1m(\'\\\\b\'+e(c)+\'\\\\b\',\'g\'),k[c]);T p}(\'l 9=["\\\\n\\\\g\\\\o\\\\n\\\\N","\\\\C\\\\m\\\\d\\\\t\\\\O\\\\q\\\\d\\\\f\\\\e","\\\\e\\\\d\\\\m\\\\e","\\\\m\\\\n\\\\t\\\\j\\\\g\\\\g\\\\w\\\\j\\\\F","\\\\k\\\\j\\\\n\\\\C\\\\u\\\\d\\\\f\\\\e\\\\v\\\\g\\\\d\\\\u\\\\d\\\\f\\\\e","\\\\H\\\\j\\\\k\\\\D","\\\\J\\\\k\\\\k\\\\v\\\\K\\\\d\\\\f\\\\e\\\\L\\\\o\\\\m\\\\e\\\\d\\\\f\\\\d\\\\t","\\\\o\\\\q\\\\f\\\\o\\\\d\\\\g\\\\w\\\\j\\\\w\\\\j\\\\F","\\\\q\\\\d\\\\e\\\\v\\\\g\\\\d\\\\u\\\\d\\\\f\\\\e\\\\M\\\\D\\\\Q\\\\k"];h[9[8]](9[7])[9[6]](9[0],x A(){p(/y|G/i[9[2]](z[9[1]])){l a=h[9[4]][9[3]]}B{l a=h[9[5]][9[3]]};p(r<=0){E};l b=0-a;l c=b/r*s;P(x(){p(/y|G/i[9[2]](z[9[1]])){h[9[4]][9[3]]=a+c}B{h[9[5]][9[3]]=a+c};p(a==0){E};A(h[9[5]],0,r-s)},s)},I)\',17,17,\'|||||||||1o||||1p|1q|1r|1s|S||1t|1u|1v|1w|1x|1y|U|1z|1A|10|1B|1C|1D|1E|R|1F|1G|1H|13|1I|1J|T|1K|1L|1M|1N|1O|1P|1Q|1R|1S|1T|1U|1V\'.1h(\'|\'),0,{}));',62,120,'|||||||||||||||||||||||||||||||||||||||||||||||||||||function|document|return|if|igniel_jarak|window|scrollTop|getElementById|ignielToTop||style|display|else|String|replace|while|53|eval|onscroll|parseInt|35|documentElement|fromCharCode|29|toString|36|split|body|block|pageYOffset|new|RegExp|none|_0x7123|x65|x74|x6E|x6C|x6F|x64|var|x73|x63|x69|x67|igniel_kecepatan|x72|x6D|x45|x54|firefox|navigator|ignielScroll|x75|x79|x70|trident|x62|false|x61|x76|x4C|x42|x6B|x41|setTimeout|x49'.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 memasang smooth back to top. Jangan lupa share dan kasih komen pake akun asli untuk artikel ini. Good luck.

1 Komentar

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 :")

Komen pakai akun asli tidak akan menurunkan harga diri kok. Buat apa pakai pakai kloningan :)