How to Make a Responsive Back to Top Button with Progress Bar Animation for Blogger

How to make a responsive back to top button with progress bar animation with html css and pure js . Blogger back to top with reading progress bar.
TUT

Hello, everyone! Today on this occasion I will going to share a tutorial about How to Make a Responsive Back to Top Button with Progress Bar Animation.

How to make a responsive back to top button with progress bar animation
© BlogTut | Back to Top Button With Progress Bar

What is Back to Top Button ?

The useful Back to top button makes it easier for readers to return to the top of the article without having to scroll / scroll manually, it feels almost mandatory to have a blog.

The addition of a feature that is not too obvious but very useful is almost rarely noticed, especially for the blog owner. However, for the convenience of the reader, the placement of this button must still be considered.

Actually, almost all Blogger template costumes have a Back To top button, usually there are those that are on the edge of the copyright template or some are sticky.

Almost every website has a Back to Top button to make it easier for visitors to return to the top page of that page.

But at this time the I wants to share the back to top button like the one on this blog.

Back to top button with Progress Bar

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 current page position. 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 and then you see in the lower left corner there is a back to top button with a scroll indicator.

So, Let's start the tutorial

How to Make Back To Top Button With Progress Bar

IMPORTANT!
Get in the habit of backing up your theme before editing.

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> and paste the following CSS Codes just above to it.

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.

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

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

<!--[ Fixed Back to Top by blogtut.tech ]-->
<b:includable id='blogtut-backtoTop'>
<div class='tutTop'>
<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: Paste the following Codes after </footer>tag.

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

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

<!-- Back to Top Js by blogtut.tech -->
<script>/*<![CDATA[*/ 
var prPt = document.querySelector('.tutTop 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('.tutTop').classList.add('vsbl') : document.querySelector('.tutTop').classList.remove('vsbl')
};
/*]]>*/</script>

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

Conclusion

This is How to Make a Responsive Back to Top Button with Progress Bar Animation for 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!

Getting Info...

2 comments

  1. Checking
  2. Amazing information brother.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.