How To Add Sticky To To Button With Reading Progress - CreatorFaruk

How To Add Sticky To To Button With Reading Progress - CreatorFaruk

Hello Dear, I am Faruk. If you want to add a sticky to top button with scroll progress on blogger website then this post is only for you.

Are you worried about your website speed? Don't worry it doesn't affect your website speed.

Also don't worry this accordion section contains dark mode css you just want to change the dark mode class that you provided with your theme dark mode class, you can change it smoothly by following this tutorial properly.

Should you add a reading progress bar?

I'd like to see it, I'd say yes you should add a parsing progress bar to your blogger site because your site guests will consider it as a solid model: the article will help to understand the article as a whole and the progress bar will help to understand the article as a whole for the guests and the impression of your site. for growth.

See More Related Articles

How does the progress bar work? 

When site guests visit the site that adds a progress bar they see a line when looking down and when looking up it works by adding some code to your blogger site. 

So without wasting important time let's check how to add responsive sticky to top button with scroll progress? 

How to add responsive sticky to top button with scroll progress? 

Important! Before we start adding code to the XML, I recommend you take a backup of your current theme If by chance any problem occurs, you can recover it later

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 search the code ]]></b:skin> or /*]]>*/</style> and paste the following CSS Codes just above to it. Or you can paste it above <head/> tag by adding <style></style>

/* Sticky To Top With Reading Progress Bar by CreatorFaruk */ .tTpB{justify-content:center;position:fixed;right:20px;width:45px;height:45px;border-radius:50%;cursor:pointer;visibility:hidden;opacity:0;z-index:9999;transform:scale(0);transition:transform .3s ease,opacity .3s ease,visibility .3s ease,margin-bottom 1s ease}.tTpB.vbl{visibility:visible;opacity:1;transform:scale(1)}.tTpB{bottom:70px}.tTpB:hover{opacity:.8}.tTpB svg{height:100%;width:100%;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);stroke-width:1.5;cursor:pointer}.tTpB svg .b{fill:#fff;stroke:#e6e6e6;opacity:.9}.tTpB svg .c{fill:none;stroke:#482dff;stroke-dasharray:100 100;stroke-dashoffset:100;stroke-linecap:round}.tTpB svg .d{fill:none;stroke:#08102b}.drK .tTpB svg .b{fill:#2d2d30;stroke:#404045}.drK .tTpB svg .c{stroke:#8775f5}.drK .tTpB svg .d{stroke:#fffdfc}.tTpB{display:flex;align-items:center}

Step 6: Then find the code </body> and paste the following JS Codes just above to it.

<!--[ Sticky To Top With Reading Progress Bar by CreatorFaruk ]-->

<div class="tTpB" id="backTop" onclick="window.scrollTo({top: 0});"> <svg viewBox="0 0 34 34"> <circle class="b" cx="17" cy="17" r="15.92"></circle> <circle class="c scrollProgress" cx="17" cy="17" r="15.92"></circle> <path class="line d" d="M15.07,21.06,19.16,17l-4.09-4.06"></path> </svg> </div> <script type="text/javascript"> //<![CDATA[ 	var progressPath = document.querySelector(".scrollProgress"); 	var 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'; 	var updateProgress = function() { 		var scroll = document.documentElement.scrollTop; 		var height = document.documentElement.scrollHeight - window.innerHeight; 		var progress = pathLength - (scroll * pathLength / height); 		progressPath.style.strokeDashoffset = progress; 	} 	updateProgress(); 	window.addEventListener('scroll', (updateProgress)); 	var offset = 0; 	var duration = 550; 	window.onscroll = function() { 		 if (document.documentElement.scrollTop > offset) { 			document.querySelector('.tTpB').classList.add('vbl'); 		} else { 			document.querySelector('.tTpB').classList.remove('vbl'); 		} 	}; 	document.querySelector('.tTpB').onclick = function() { 		document.querySelector('html, body').animate(window.scroll({ top: ['8px', '280px'] },{ duration: 2500, // number in ms [this would be equiv of your speed]. easing: 'ease-in-out', iterations: 1, // infinity or a number. // fill: '' })); 		return false; 	}; //]]> </script>

Step 7: Save Template and Enjoy Sticky To To Button.

Conclusion

In this article I have created a tutorial on adding responsive sticky to top button with scroll progress. I hope you liked this article and please share with your friends and follow the blog for more. 

If you face any problem join our Telegram group and share your problem.

Join Telegram Group

Rate This Article

Go to Link

Thank You So Much How To Add Sticky To To Button With Reading Progress - CreatorFaruk For Reading This Article.