If You Want Adsense Approval for your blog JOIN US Adsense Ready theme Now!

How to Install Back To Top Button with Progress

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

This time MISUM TECH will share tips on How to Install the Back To Top Button with Progress .


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.

About the Author

Hi Greetings! thanks for reaching here, We are so delighted to welcome you on board. Your intelligence and energy make you an asset to your family and love ones.

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.