Tombol Back To Top Progress

   sumber

; https://www.arlinacode.com/2022/07/cara-memasang-tombol-back-to-top-dengan-progress.html
    sebelum </head> [ font awesome V 4.7.0 ]

<script>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

   atau link nya [ font awesome V 4.7.0 ]

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

Jquery Ajax v.3.3.1

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
'></script> 

    tambahkan lagi sebelum </head>

 
<style>
/* Back to top with progress */
@-webkit-keyframes border-transform{0%,100%{border-radius:63% 37% 54% 46% / 55% 48% 52% 45%}14%{border-radius:40% 60% 54% 46% / 49% 60% 40% 51%}28%{border-radius:54% 46% 38% 62% / 49% 70% 30% 51%}42%{border-radius:61% 39% 55% 45% / 61% 38% 62% 39%}56%{border-radius:61% 39% 67% 33% / 70% 50% 50% 30%}70%{border-radius:50% 50% 34% 66% / 56% 68% 32% 44%}84%{border-radius:46% 54% 50% 50% / 35% 61% 39% 65%}}
.arlina-to-top{background:#fff;position:fixed;right:25px;bottom:25px;height:46px;width:46px;cursor:pointer;display:block;border-radius:99em;box-shadow:inset 0 0 0 2px rgb(0 0 0 / 10%);z-index:10000;opacity:0;visibility:hidden;transform:translateY(-15px);transition:all .3s linear}
.arlina-to-top.active-progress{opacity:1;visibility:visible;transform:translateY(0)}
.arlina-to-top::after{position:absolute;font-family:'Fontawesome';content:'\f106';text-align:center;line-height:44px;font-size:26px;color:rgba(0,0,0,0.3);left:0;top:0;height:46px;width:46px;cursor:pointer;display:block;z-index:1;transition:all .3s linear}
.arlina-to-top:hover::after{opacity:0}
.arlina-to-top::before{position:absolute;font-family:'Fontawesome';content:'\f106';text-align:center;line-height:44px;font-size:26px;opacity:0;background:black;-webkit-background-clip:text;-webkit-text-fill-color:transparent;left:0;top:0;height:46px;width:46px;cursor:pointer;display:block;z-index:2;transition:all .3s linear}
.arlina-to-top:hover::before{opacity:1}
.arlina-to-top svg path{fill:none}
.arlina-to-top svg.progress-circle path{stroke:rgba(0,0,0,0.2);stroke-width:4;box-sizing:border-box;transition:all .3s linear}
</style>

    sebelum </body>

<div class='arlina-to-top'>
   <svg class='progress-circle svg-content' height='100%' viewBox='-1 -1 102 102' width='100%'>
      <path d='M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98'/>
   </svg>
</div>



<script>
//<![CDATA[
// back to top with progress
!function($){"use strict";$(document).ready(function(){var a=document.querySelector(".arlina-to-top path"),b=a.getTotalLength();a.style.transition=a.style.WebkitTransition="none",a.style.strokeDasharray=b+" "+b,a.style.strokeDashoffset=b,a.getBoundingClientRect(),a.style.transition=a.style.WebkitTransition="stroke-dashoffset 10ms linear";var c=function(){var c=$(window).scrollTop(),d=$(document).height()-$(window).height();a.style.strokeDashoffset=b-c*b/d};c(),$(window).scroll(c),jQuery(window).on("scroll",function(){jQuery(this).scrollTop()>50?jQuery(".arlina-to-top").addClass("active-progress"):jQuery(".arlina-to-top").removeClass("active-progress")}),jQuery(".arlina-to-top").on("click",function(a){return a.preventDefault(),jQuery("html, body").animate({scrollTop:0},550),!1})})}(jQuery);
//]]>
</script>

simpan template ....     demo ; codepen arlina