How to Make a Responsive Back to Top button with Progress button icon animation on Blogger

 Hello, everyone! Wellcome to SoiPro .Today on this occasion I will going to share a tutorial about How to Make a Responsive Back to Top button with Progress button icon animation on Blogger with HTML, CSS, and JavaScript

How to Make a Responsive Back to Top button with Progress button icon animation on Blogger

Back to top button with Progress bar running around it

In this article, I will share a little tutorial so that the Back to top button still appears without disturbing the reader, even with the addition of a progress bar indicator function as a marker of the position of the currently active page. So that it adds function and is also interesting to see, and it's definitely light

For the demo, you can scroll on this page or other pages on my website (www.soipro.com) and then you see in the lower left corner there is a back to top button with a scroll indicator.

Alright, let's go straight to the installation tutorial.

How to Make a Responsive Back to Top button with Progress button icon animation on Blogger

Step 1: First of all Login to your Blogger Dashboard..

Step 2: On Blogger Dashboard., click Theme.

Step 3: Click the arrow down icon next to 'customize' button.

Step 4: Click Edit HTML, you will be redirected to editing page.

Step 5: Now find the code ]]></b:skin> and paste the following CSS Codes just above to it.

 /* Back to Top by soipro.com */
.SoiTop {
	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
}

.SoiTop.vsbl {
	visibility: visible;
	opacity: 1;
	transform: scale(1)
}

.SoiTop:hover {
	opacity: .8
}

.SoiTop svg {
	height: 100% !important;
	width: 100% !important;
	-webkit-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	transform: rotate(-90deg);
	stroke-width: 1.5;
	cursor: pointer
}

.SoiTop svg .b {
	fill: #fff;
	stroke: #e6e6e6;
	opacity: .9
}

.SoiTop svg .c {
	fill: none;
	stroke: #989b9f;
	stroke-dasharray: 100 100;
	stroke-dashoffset: 100;
	stroke-linecap: round
}

.SoiTop svg .d {
	fill: none;
	stroke: #08102b
}

.drK .SoiTop svg .b {
	fill: #2d2d30;
	stroke: #404045
}

.drK .SoiTop svg .c {
	stroke: #8775f5
}

.drK .SoiTop svg .d {
	stroke: #fffdfc
}

If your template has a dark mode feature, and if you want a different color when in dark mode, you can customise the codes as per your need. Each template can have a different dark mode class, so please adjust it, you can replace the marked class with your template dark mode class.

Step 6: Now find for the code </b:defaultmarkup> and paste the following Codes just above to it.

 <!--[ Fixed Back to Top by soipro.com ]-->
<b:includable id='soipro-backtoTop'>
   <div class='SoiTop'>
      <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>
</b:includable>

Step 7: Find the code </footer> and put the following HTML code right below it

<!--[ Fixed Back to Top by soipro.com ]-->
<b:include name='soipro-backtoTop'/>

Step 8: Now add the following Javascript Codes just above to </body> tag. If you don't find it, it is probably already parsed which is </body>.

 <!-- Back to Top Js by soipro.com -->
<script > /*<![CDATA[*/
   var prPt = document.querySelector('.SoiTop 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 _0x89fex4 = document.documentElement.scrollTop,
      _0x89fex5 = document.documentElement.scrollHeight - window.innerHeight;
   prPt.style.strokeDashoffset = ptLh - _0x89fex4 * ptLh / _0x89fex5
};
updateProgress(), window.addEventListener('scroll', updateProgress);
var offset = 0;
window.onscroll = function () {
   document.documentElement.scrollTop > offset ? document.querySelector('.SoiTop').classList.add('vsbl') : document.querySelector('.SoiTop').classList.remove('vsbl')
};
/*]]>*/
</script>

Step 9: Lastly, Save the changes by clicking on this icon 

Conclusion

Ok so that 's How to Make a Responsive Back to Top button with Progress button icon animation on Blogger. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in comment box. Thank you!

Source:
www.soipro.com