How to add back to top button with progress without using jquery on blogger

How to add a back to top button, often called back to top with progress, on a Blogger website: The back to top button with Progress has the same function as the back to top button everyone still uses, just different. is during page scrolling on the button that represents the percentage progress of the page scrolled.

And the advantage of this code is that it only uses javascript without using the support jquery library, so it can meet the requirements of many css-oriented people.

As we know, the back to top button, often called back to top, plays an important role in the on-page experience. It helps users get back to the top of the page with just one click and this improves the user experience well.

As we know, the back to top button, often called back to top, plays an important role in the on-page experience. It helps users get back to the top of the page with just one click and this improves the user experience well.
Demo
And now follow the steps to install Back to Top Button with Progress on Blogger Website.
STEP 1: Go to your Blogger Dashboard.
STEP 2: Click on Theme > Edit HTML.
STEP 3: Copy the css code and paste it into the blog's css section.

.btotop {
	position: fixed;
	right: 30px;
	bottom: 30px;
	height: 40px;
	width: 40px;
	cursor: pointer;
	display: block;
	border-radius: 50px;
	box-shadow: inset  0 0 0 2px #ddd;
	z-index: 10000;
	opacity: 0;
	visibility: hidden;
	transform: translateY(25px);
	-webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.btotop.active-progress {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.btotop::after {
	position: absolute;
	content: '🠅';
	text-align: center;
	line-height: 40px;
	font-size: 18px;
	color: #666;
	left: 0;
	top: 0;
	height: 40px;
	width: 40px;
	cursor: pointer;
	display: block;
	z-index: 1;
	-webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.btotop:hover::after {
	opacity: 0;
}

.btotop::before {
	position: absolute;
	content: '🠅';
	text-align: center;
	line-height: 40px;
	font-size: 18px;
	opacity: 0;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	left: 0;
	top: 0;
	height: 40px;
	width: 40px;
	cursor: pointer;
	display: block;
	z-index: 2;
	-webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.btotop:hover::before {
	opacity: 1;
}
.btotop svg path { 
	fill: none;
}
.btotop svg.progress-circle path {
	stroke: #ff0000;
	stroke-width: 4;
	box-sizing:border-box;
	-webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.btotop svg{width:40px;height:40px}
.darkMode .btotop::after{color:#ddd}
.darkMode .btotop{background:#333;box-shadow: inset  0 0 0 2px #ff0000}
.darkMode .btotop svg.progress-circle path{stroke: #fff}

STEP 4: Paste the javascript before the closing tag </body>

<script>/*<![CDATA[*/
// back to top with progress
let progressPath = document.querySelector('.btotop path');
let pathLength = progressPath.getTotalLength();
progressPath.style.transition = progressPath.style.WebkitTransition = 'none';
progressPath.style.strokeDasharray = pathLength + ' ' + pathLength;
progressPath.style.strokeDashoffset = pathLength;
progressPath.getBoundingClientRect();
progressPath.style.transition = progressPath.style.WebkitTransition = 'stroke-dashoffset 10ms linear';	
let updateProgress = function () {
  let scroll = window.scrollY;
	let height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  let progress = pathLength - (scroll * pathLength / height);
	progressPath.style.strokeDashoffset = progress;
}

updateProgress();
window.onscroll = function(){updateProgress()};
let offset = 50;
let duration = 550;
let progress = document.getElementsByClassName('btotop');
window.addEventListener("scroll", function() {
  if(window.scrollY > offset) {
     Array.from(progress).forEach(function(pro) {
        pro.classList.add('active-progress');
     })
  } else {
     Array.from(progress).forEach(function(pro) {
        pro.classList.remove('active-progress');
     })
  }
});

Array.from(progress).forEach(function(e) {
  e.addEventListener('click', function(event) {
    event.preventDefault();
    window.scrollTo({top: 0, behavior: 'smooth'});
    return false;
  });
})
/*]]>*/</script>

STEP 5: Finally, paste the following HTML code before </body>

<div class='btotop'>
		<svg class='progress-circle' 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>

In the css section there is a class "darkMode" that can be different with templates so edit accordingly.