Smooth Scroll Back To Top Javascript With Animation

Sudah banyak yang sharing cara menciptakan tombol back to top untuk blog, namun kebanyakan memakai jquery. Nah kali ini aku akan membagikan cara menciptakan back to top dengan gerakan smooth scroll memakai pure javascript ditambah css animasi untuk kemunculannya.

Ada 2 macam smooth scroll back to top javascript with animation ini, yang pertama memakai suplemen javascript untuk show hide on scroll dengan animasi bounceIn untuk memperhalus munculnya tombol, dan yang kedua tidak memakai javascript show hide on scroll, namun hanya memakai css animasi bounceIn left untuk kemunculan tombolnya saat halaman dibuka menyerupai animasi gif di bawah ini.

Dengan show hide on scroll.

DEMO

Tanpa show hide on scroll.

DEMO

Back To Top dengan show hide on scroll

Silahkan simpan arahan css ini di atas arahan </head>. Tombol hanya ditampilkan di halaman postingan dan dihilangkan di perangkat mobile.

 <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>

Simpan javascript di bawah ini di atas arahan </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>

Silahkan ganti kode header-wrapper kalau ada tag id yang lebih atas dari itu. Angka 600 yaitu ketiggian scroll untuk memunculkan tombolnya.

Back To Top tanpa show hide on scroll

Silahkan simpan arahan css ini di atas arahan </head>. Tombol hanya ditampilkan di halaman postingan dan dihilangkan di perangkat mobile.

 <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>

Simpan javascript di bawah ini di atas arahan </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>

Silahkan ganti kode header-wrapper kalau ada tag id yang lebih atas dari itu.

Tombol back to top ini memakai font awesome, jadi pastingan Anda sudah memasang font awesome di blog Anda.


Sumber https://www.kompiajaib.com/

Share this post