The Back To Top button with Progress has the same function as the back to top button as in the previous tutorial on this blog, the difference is that there is one more function, which is to find out where the page is scrolled by showing an animated line on the back to top button. This is one way to encourage users to browse more content easily.
The Back To Top button with Progress has a fairly important role for a site with content that has long page content, for a site that has a lot of information on its page it will make other content skip unnoticed scrolling far down the page.
Alright, for those who want to install it please follow these steps:
How to Install Back To Top Button with Progress
The code I'm going to share uses icons from Fontawesome, if they haven't already been added. Add the code below before </head>in the Template editor.
<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>After adding Fontawesome code please add below code just before</head>
The first step, open Blogger > Click the Theme menu > Click Edit HTML > Then add the code below right before</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>Next add the two codes below before</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>The next step Save the theme and see the results on your blog.
That's all for tips on How to Install the Back To Top Button with Progress , hopefully it's useful and greetings.