Memasang Tombol Back to Top Dengan Javascript

Ada pertanyaan dari sebuah forum javascript dan Blogger dan kebetulan saya juga aktif di Grup tersebut, ada pertanyaan dari salah satu anggota grup yang menanyakan bisa tidak jika Memasang Tombol Back to Top Dengan Javascript, sebagaian besar berkomentar belum pernah coba dan termasuk saya juga karena selama ini templated blog yang saya pakai Tombol Back to Top masih menggunakan Jquery, akhirnya merasa penasaran saya coba googling dan ketemu ini Tutorial dari Blognya Kang Adhy Suryadi yang kebetulan pernah memposting cara Memasang Tombol Back to Top Dengan Javascript.

Disitu tertulis dan disajikan 2 cara pemasangan Tombol Back to Top Dengan Javascript yang pertama tidak menggunakan Javascript show hide on scroll dan cara yang yang ke dua menggunakan Javascript show hide on scroll dan tambahan animasi bounceln yang gunanya untuk lebih memperhalus tampilan pada tombol back to Top.

Bagi sobat yang ingin mencobanya mari kita simak berikut ini Cara Memasang Tombol Back to Top Dengan Javascript.

Cara Pertama 

Pemasangan Back To Top Tidak show hide on scroll

Silahkan sobat salin kode CSS dibawah ini lalu letakkan tepat diatas kode </head> fungsi tombol ini hanya bisa tampil di postingan sedangkan di perangkat mobile tidak terlihat

<b:if cond='data:blog.isMobileRequest == &quot;false&quot; and data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.backtotop{position:fixed;bottom:20px;right:20px;cursor:pointer}
.element-animation{animation:animationFrames ease 1s;animation-iteration-count:1;transform-origin:50% 50%;animation-fill-mode:forwards;-webkit-animation:animationFrames ease 1s;-webkit-animation-iteration-count:1;-webkit-transform-origin:50% 50%;-webkit-animation-fill-mode:forwards;-moz-animation:animationFrames ease 1s;-moz-animation-iteration-count:1;-moz-transform-origin:50% 50%;-moz-animation-fill-mode:forwards;-o-animation:animationFrames ease 1s;-o-animation-iteration-count:1;-o-transform-origin:50% 50%;-o-animation-fill-mode:forwards;-ms-animation:animationFrames ease 1s;-ms-animation-iteration-count:1;-ms-transform-origin:50% 50%;-ms-animation-fill-mode:forwards}
@keyframes animationFrames{0%{opacity:0;transform:translate(-1500px,0)}
60%{opacity:1;transform:translate(30px,0)}
80%{transform:translate(-10px,0)}
100%{opacity:1;transform:translate(0,0)}
}
@-moz-keyframes animationFrames{0%{opacity:0;-moz-transform:translate(-1500px,0)}
60%{opacity:1;-moz-transform:translate(30px,0)}
80%{-moz-transform:translate(-10px,0)}
100%{opacity:1;-moz-transform:translate(0,0)}
}
@-webkit-keyframes animationFrames{0%{opacity:0;-webkit-transform:translate(-1500px,0)}
60%{opacity:1;-webkit-transform:translate(30px,0)}
80%{-webkit-transform:translate(-10px,0)}
100%{opacity:1;-webkit-transform:translate(0,0)}
}
@-o-keyframes animationFrames{0%{opacity:0;-o-transform:translate(-1500px,0)}
60%{opacity:1;-o-transform:translate(30px,0)}
80%{-o-transform:translate(-10px,0)}
100%{opacity:1;-o-transform:translate(0,0)}
}
@-ms-keyframes animationFrames{100%,60%{opacity:1}
0%{opacity:0;-ms-transform:translate(-1500px,0)}
60%{-ms-transform:translate(30px,0)}
80%{-ms-transform:translate(-10px,0)}
100%{-ms-transform:translate(0,0)}
}
</style>
</b:if>

Selanjutnya, silahkan sobat salin kembali kode kode Javascript dibawah ini dan letakkan di atas </body>

<b:if cond='data:blog.isMobileRequest == &quot;false&quot; and data:blog.pageType == &quot;item&quot;'>
<script>
//<![CDATA[
function resetScroller(e){var o=window.pageYOffset,n=document.getElementById(e).offsetTop,r=setTimeout("resetScroller('"+e+"')",speed);o>n?(scrollY=o-distance,window.scroll(0,scrollY)):clearTimeout(r)}var scrollY=0,distance=40,speed=24;
//]]>
</script>
<span class="backtotop element-animation" onclick="return false;" onmousedown="resetScroller('header-wrapper');"><i class="fa fa-chevron-circle-up fa-3x"></i></span>
</b:if>

Perhatikan kode yang ditandai header-wrapper silahkan ganti kode tersebut kalau ada tag id yang lebih tinggi atau lebih atas dari tag tersebut.


Cara Ke Dua
Pemasangan Back To Top Menggunakan show hide on scroll sama seperti halnya cara pertama, fungsi tombol ini hanya bisa tampil di postingan sedangkan di perangkat mobile tidak terlihat.

Silahkan sobat salin kode CSS dibawah ini lalu letakkan tepat di atas </head>

<b:if cond='data:blog.isMobileRequest == &quot;false&quot; and data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#backtotop{position:fixed;bottom:20px;right:20px;cursor:pointer}
.ani-dur{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;animation-duration:1s}
@-webkit-keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.9)}
100%{-webkit-transform:scale(1)}}
@-moz-keyframes bounceIn{0%{opacity:0;-moz-transform:scale(.9)}
100%{-moz-transform:scale(1)}}
@-ms-keyframes bounceIn{0%{opacity:0;-ms-transform:scale(.9)}
100%{-ms-transform:scale(1)}}
@keyframes bounceIn{0%{opacity:0;transform:scale(.9)}
100%{transform:scale(1)}}
.ani-name{-webkit-animation-name:bounceIn;-moz-animation-name:bounceIn;-ms-animation-name:bounceIn;animation-name:bounceIn}
</style>
</b:if>

Selanjutnya silahkan salin kembali kode Javascript dibawah ini lalu letakkan tepat di atas kode </body>

<b:if cond='data:blog.isMobileRequest == &quot;false&quot; and data:blog.pageType == &quot;item&quot;'>
<script>
//<![CDATA[
function resetScroller(e){var o=window.pageYOffset,n=document.getElementById(e).offsetTop,r=setTimeout("resetScroller('"+e+"')",speed);o>n?(scrollY=o-distance,window.scroll(0,scrollY)):clearTimeout(r)}var appended=!1,bookmark2=document.createElement("div");bookmark2.id="backtotop",bookmark2.innerHTML='<span class="ani-dur ani-name" onclick="return false;" onmousedown="resetScroller(&quot;header-wrapper&quot;);"><i class="fa fa-chevron-circle-up fa-3x"></i></span>',onscroll=function(){var e=document.documentElement.scrollTop||document.body.scrollTop;e>600?appended||(document.body.appendChild(bookmark2),appended=!0):appended&&(document.body.removeChild(bookmark2),appended=!1)};var scrollY=0,distance=40,speed=24;
//]]>
</script>
</b:if>

Perhatikan kode yang ditandai Angka 600 adalah jarak tinggi Scroll yang nantinya untuk munculnya tombol Back To Top dan header-wrapper silahkan ganti kode tersebut kalau ada tag id yang lebih tinggi atau lebih atas dari tag tersebut.

DEMO HASIL

Cara Show Hide On Scroll

DEMO

Cara Tanpa Show Hide On Scroll

DEMO

Perlu menjadi perhatian Cara Memasang Tombol Back to Top Dengan Javascript ini menggunakan FontAwesome jadi pastikan sobat sudah memasangnya di templated blog-nya, dan selesai Selamat Mencoba.