Ada pertanyaan dari sebuah forum javascript dan Blogger dan kebetulan aku juga aktif di Grup tersebut, ada pertanyaan dari salah satu anggota grup yang menanyakan mampu tidak kalau Memasang Tombol Back to Top Dengan Javascript, sebagaian besar berkomentar belum pernah coba dan termasuk aku juga sebab selama ini templated blog yang aku pakai Tombol Back to Top masih menggunakan Jquery, kesannya merasa penasaran aku 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 suplemen animasi bounceln yang gunanya untuk lebih memperhalus tampilan pada tombol back to Top.
Bagi sahabat 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 sahabat salin arahan CSS dibawah ini lalu letakkan sempurna diatas arahan </head> fungsi tombol ini hanya mampu tampil di postingan sedangkan di perangkat mobile tidak terlihat
Selanjutnya, silahkan sahabat salin kembali arahan kode Javascript dibawah ini dan letakkan di atas </body>
Perhatikan arahan yang ditandai header-wrapper silahkan ganti arahan 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 ibarat halnya cara pertama, fungsi tombol ini hanya mampu tampil di postingan sedangkan di perangkat mobile tidak terlihat.
Silahkan sahabat salin arahan CSS dibawah ini lalu letakkan sempurna di atas </head>
Selanjutnya silahkan salin kembali arahan Javascript dibawah ini lalu letakkan sempurna di atas arahan </body>
Perhatikan arahan yang ditandai Angka 600 yaitu jarak tinggi Scroll yang nantinya untuk munculnya tombol Back To Top dan header-wrapper silahkan ganti arahan tersebut kalau ada tag id yang lebih tinggi atau lebih atas dari tag tersebut.
Perlu menjadi perhatian Cara Memasang Tombol Back to Top Dengan Javascript ini menggunakan FontAwesome jadi pastikan sahabat sudah memasangnya di templated blog-nya, dan selesai Selamat Mencoba.
<b:if cond='data:blog.isMobileRequest == "false" and data:blog.pageType == "item"'> <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 sahabat salin kembali arahan kode Javascript dibawah ini dan letakkan di atas </body>
<b:if cond='data:blog.isMobileRequest == "false" and data:blog.pageType == "item"'> <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 arahan yang ditandai header-wrapper silahkan ganti arahan 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 ibarat halnya cara pertama, fungsi tombol ini hanya mampu tampil di postingan sedangkan di perangkat mobile tidak terlihat.
Silahkan sahabat salin arahan CSS dibawah ini lalu letakkan sempurna di atas </head>
<b:if cond='data:blog.isMobileRequest == "false" and data:blog.pageType == "item"'> <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 arahan Javascript dibawah ini lalu letakkan sempurna di atas arahan </body>
<b:if cond='data:blog.isMobileRequest == "false" and data:blog.pageType == "item"'> <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("header-wrapper");"><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 arahan yang ditandai Angka 600 yaitu jarak tinggi Scroll yang nantinya untuk munculnya tombol Back To Top dan header-wrapper silahkan ganti arahan tersebut kalau ada tag id yang lebih tinggi atau lebih atas dari tag tersebut.
DEMO HASIL
Cara Show Hide On Scroll
Cara Tanpa Show Hide On Scroll
Perlu menjadi perhatian Cara Memasang Tombol Back to Top Dengan Javascript ini menggunakan FontAwesome jadi pastikan sahabat sudah memasangnya di templated blog-nya, dan selesai Selamat Mencoba.
Comments