Home
Blogger

How to add Animated Progress back to the top in the Blogger


Hello everyone, Welcome to Shiva Technic World! If your website page is too long, it will make hard to come back to the top users, like users need to scroll more to come up it is also time-wasting for users especially mobile users because PC users get a scroll bar on the side on the website but for mobile users they to touch and scroll! So we came up with a solution for your website, it gives you back to the top and is also beautiful, animated, page progress, sticky, etc... Worrying about affecting the speed of your website? Then you no need to worry about it because it was made with Pure JS and CSS. So without wasting much time let's check how to add animated progress back to the top in Blogger!

How to add Animated Progress back to the top in Blogger

  • First, go to your Blogger dashboard
  • Then click on the Theme option
  • Then click on the drop-down icon near Customize option
  • Then click on the Edit HTML option
  • Then find ]]></b:skin> and paste the following CSS just above it or you can paste it above <head/> tag by adding <style></style>


    • /* Back to Top (STW) */ .Ttop{display:flex;align-items:center;justify-content:center;position:fixed;right:20px;bottom:70px;width:45px;height:45px;border-radius:50%;cursor:pointer;visibility:hidden;opacity:0;z-index:5;transform:scale(0);transition:transform .3s ease, opacity .3s ease,visibility .3s ease,margin-bottom 1s ease} .Ttop.vsbl{visibility:visible;opacity:1;transform:scale(1)}.Ttop:hover{opacity:.8} .Ttop svg{height:100% !important;width:100% !important;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);stroke-width:1.5;cursor:pointer} .Ttop svg .b{fill:#fff;stroke:#e6e6e6;opacity:.9} .Ttop svg .c{fill:none;stroke:#6200ee;stroke-dasharray:100 100;stroke-dashoffset:100;stroke-linecap:round} .Ttop svg .d{fill:none;stroke:#08102b} .drK .Ttop svg .b{fill:#2d2d30;stroke:#404045} .drK .Ttop svg .c{stroke:#8775f5} .drK .Ttop svg .d{stroke:#fffdfc}


    If your template supports dark mode then replace drK with your template dark mode class, If your theme did not support dark mode then keep it default!


  • Then copy the following HTML code and paste it just above </body> tag


    • <!--[ Back to Top (STW) ]-->
          <div class='Ttop'>
    <svg onclick='window.scrollTo({top: 0})' viewBox='0 0 34 34'><circle class='b' cx='17' cy='17' r='15.92'/><circle class='c' cx='17' cy='17' r='15.92'/><path class='line d' d='M15.07,21.06,19.16,17l-4.09-4.06'/></svg>
          </div>


  • Then paste the following JS just below we pasted the HTML code


    • <script>/*<![CDATA[*//* Back to Top (STW) */ var prPt=document.querySelector(".Ttop circle.c"),ptLh=prPt.getTotalLength();prPt.style.transition=prPt.style.WebkitTransition="none",prPt.style.strokeDasharray=ptLh+" "+ptLh,prPt.style.strokeDashoffset=ptLh,prPt.getBoundingClientRect();var updateProgress=function(){var t=document.documentElement.scrollTop,e=document.documentElement.scrollHeight-window.innerHeight;prPt.style.strokeDashoffset=ptLh-t*ptLh/e};updateProgress(),window.addEventListener("scroll",updateProgress);var offset=0;window.onscroll=function(){document.documentElement.scrollTop>offset?document.querySelector(".Ttop").classList.add("vsbl"):document.querySelector(".Ttop").classList.remove("vsbl")};
    /*]]>*/</script>


  • Then Save the HTML

    • Want to see how it looks?


    Demo



    Conclusion


    Hope this How to add Animated Progress back to the top in the Blogger tutorial will be useful to you, If you have any doubts related to this tutorial ask me in the comment, Do share with your friends, Thanks for visiting, and Have a nice day!