Satya Ki Pathshala

Home
Blogger

How to add Back to Top Button with Progress on Blogger Website | Satya Ki Pathshala

How to add Back to Top Button with Progress on Blogger Website: Today I am here with a new topic where you will learn How to add Back to Top Button
How to add Back to Top Button with Progress on Blogger Website: Today I am here with a new topic where you will learn How to add Back to Top Button with Progress on Blogger Website. I wrote another article named How to Create an Animated Floating Back To Top button. You can check that topic also.

The Back to Top Button with Progress has the same function I mentioned in my previous post. In the last post, I gave you the tutorial on animated floating back to the top button. Whichever post you like, you can apply to your blogger website.

How to add Back to Top Button with Progress on Blogger Website | Satya Ki Pathshala

As we know that it plays an important role in the on-page experience. As I have mentioned in my previous post that if you have a long page and the user thinks to go to the top of that particular page then he or she has to just click on that back-to-top button. And this improves the user experience.

You may also like:

So, now follow the steps to install the Back to Top Button with Progress on Blogger Website.

STEP 1:    Go to Blogger Dashboard.
STEP 2:    Now click on Theme > Edit HTML.
STEP 3:    Now copy & paste the below FontAwesome Code to the blogger theme before </head> tag.

<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> (code-box)
 STEP 4:    After adding FontAwesome Code now copy the below CSS code and paste it above ]]></b:skin> tag.

/* 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%}}
.SK-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}
.SK-to-top.active-progress{opacity:1;visibility:visible;transform:translateY(0)}
.SK-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}
.SK-to-top:hover::after{opacity:0}
.SK-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}
.SK-to-top:hover::before{opacity:1}
.SK-to-top svg path{fill:none}
.SK-to-top svg.progress-circle path{stroke:rgba(0,0,0,0.2);stroke-width:4;box-sizing:border-box;transition:all .3s linear} (code-box)
STEP 5:    Now copy the below codes and paste them before the </body> tag and save the theme.

<div class='SK-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> (code-box)
<script>
//<![CDATA[
// back to top with progress
!function($){"use strict";$(document).ready(function(){var a=document.querySelector(".SK-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(".SK-to-top").addClass("active-progress"):jQuery(".SK-to-top").removeClass("active-progress")}),jQuery(".SK-to-top").on("click",function(a){return a.preventDefault(),jQuery("html, body").animate({scrollTop:0},550),!1})})}(jQuery);
//]]>
</script> (code-box)

Final Words

So, this is all for now. I hope this article How to add Back to Top Button with Progress on Blogger Website will help you customize your blog in a better way. Don't forget to share this article with others. Because sharing is caring. It takes time and energy to make content and serve you. So, please do support this blog and my YouTube Channel to grow. When you share my content on social media, it inspires me to do something even better.

So keep sharing. See you in the next post. Till then, take care.