Cara Membuat Tombol Smooth Back To Top dengan menggunakan Pure Javascript

Sun3daily - Cara Memasang Script Back To Top Dengan Pure Javascript Halo sobat blogger sekalian kali ini saya akan memposting sebuah artikel yaitu "Cara Membuat Tombol Smooth Back To Top dengan menggunakan Pure Javascript" Apa sih kegunaannya? kegunaan nya sih sederhana , sebagai cara cepat tombol akses ke menu utama di atas. yu langsung aja simak penjelasan nya dibawah , jangan lupa baca sampai bawah agar kalian tau cara membuat Tombol Smooth back to top .

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

1. Kode CSSSimpan kode berikut "sebelum" </style> atau ]]></b:skin>

/* Back to top ala Igniel */ #bangzoelToTop {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='bangzoel25ToTop'/> <script type='text/javascript'> //<![CDATA[ (function() { var bangzoel25_kecepatan = 300; //kecepatan scroll var bangzoel25_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 Anda

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

var bangzoel25_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.

Nah Sekian deh artikel dari Cara Memasang Script Back To Top Dengan Pure Javascript  semoga bermanfaat bagi sobat blogger semua nya jangan lupa kunjungi terus blog nya bang zoel , karena akan ada info menarik lainnya tentang seputar blogging hanya di Sun3daily . Apabila ada yang kurang mengerti silahkan berkomentar dibawah artikel ini terima kasih.