How to Add a Scroll Back to Top Button to Any Blogger Theme

Scroll Back to Top Button to Any Blogger Theme

This can be done in two simple ways.

I am briefly describing the step-by-step processes by which this task will be accomplished.

But I strongly request you to backup your blogger theme before doing this.

So that if there is a problem you can go back to the previous place.

To accomplish this task you must go to Blogger Dashboard, then go to Theme Options, then click Edit HTML and then go inside.

Now copy the following CSS code.

Then enter it in the place where CSS is used in your blogger theme.

  
/* Scroll Back to Top */ .sbtt{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} .sbtt.vsbl{visibility:visible;opacity:1;transform:scale(1)}.sbtt:hover{opacity:.8} .sbtt svg{height:100% !important;width:100% !important;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);stroke-width:1.5;cursor:pointer} .sbtt svg .b{fill:#fff;stroke:#e6e6e6;opacity:.9} .sbtt svg .c{fill:none;stroke:#6200ee;stroke-dasharray:100 100;stroke-dashoffset:100;stroke-linecap:round} .sbtt svg .d{fill:none;stroke:#08102b} .drK .sbtt svg .b{fill:#2d2d30;stroke:#404045} .drK .sbtt svg .c{stroke:#8775f5} .drK .sbtt svg .d{stroke:#fffdfc}
  

Then copy the following HTML and JavaScript code and place it above the closing body tag of your blogger theme.

  
<!--[ Scroll Back to Top ]-->
<div class='sbtt'><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> <script>/*<![CDATA[*//* Scroll Back to Top */ var prPt=document.querySelector(".sbtt 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(".sbtt").classList.add("vsbl"):document.querySelector(".sbtt").classList.remove("vsbl")};
/*]]>*/</script>
  

Then click on save icon to save.

Visit your website to see if your desired action has been successful.