How to Add Back To Top Button with Progress Bar in Blogger

Farhan
Oct 1, 2022
Hello, everyone! Today, I'm going to show you How to Make a Responsive Back to Top Button with Progress Bar Animation.

Back to Top Button with Progress Bar in Blogger
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 get back to the beginning of an article without having to scroll up or down by hand. Having a blog seems almost like a requirement these days.

The blog owner almost never notices when a feature is added that isn't too obvious but is very useful. But for the reader's sake, it's still important to think about where to put this button.

In fact, almost all Blogger template costumes have a "Back to Top" button, though some are on the edge of the copyright template or are sticky.

Almost every website has a button called "Back to Top" that makes it easier for visitors to go back to the top of the page.

But right now, I want to share a button like the one on this blog that lets you go back to the top.

Back to top button with Progress Bar

In this article, I'll give you a quick tutorial on how to make the Back to Top button still show up without bothering the reader, even if you add a progress bar to show where you are on the page. So that it serves a purpose and is also fun to look at. It's also light.

For the demo, you can scroll on this page or on other pages, and then you'll see a back to top button with a scroll indicator in the bottom left corner.

How to Make Back To Top Button With Progress Bar

Step 1: First of all Go to your Blogger Dashboard.
Step 2: On Blogger Dashboard, click on Themes.
Step 3: Click the arrow down icon next to 'customize' button.
Step 4: Click Edit HTML, and 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 includes a dark mode feature, and you want a different color when in dark mode, you can modify the codes to your liking. Each template may have a unique dark mode class, so please adjust accordingly. You can replace the marked class with your template's dark mode class. 
/* Back to Top by blogrtool.com */

.blogrTool{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} .blogrTool.vsbl{visibility:visible;opacity:1;transform:scale(1)}

.blogrTool:hover{opacity:.8} .blogrTool svg{height:100% !important;width:100% !important;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);

transform:rotate(-90deg);stroke-width:1.5;cursor:pointer} .blogrTool svg .b{fill:#fff;stroke:#e6e6e6;opacity:.9} .blogrTool svg .c{fill:none;stroke:#989b9f;

stroke-dasharray:100 100;stroke-dashoffset:100;stroke-linecap:round} .blogrTool svg .d{fill:none;stroke:#08102b} 

.drK .blogrTool svg .b{fill:#2d2d30;stroke:#404045} .drK .blogrTool svg .c{stroke:#8775f5} .drK .blogrTool svg .d{stroke:#fffdfc}
Step 6: Now search for </b:defaultmarkup> and paste the following Codes just above to it.
<!--[ Fixed Back to Top by blogrtool.com ]-->

<b:includable id='blogrtool-backtoTop'>

<div class='blogrTool'>

<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='blogrtool-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 blogrtool.com -->

<script>/*<![CDATA[*/ 

var prPt = document.querySelector('.blogrTool 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('.blogrTool').classList.add('vsbl') : document.querySelector('.blogrTool').classList.remove('vsbl')

};

/*]]>*/</script>
Step 8: Lastly, Save the changes by clicking on this icon 

Visit Blogpen to get Latest Blogging Tips, Blogger Templates, Blogger Scripts, SEO Tips and Adsense Tips to grow your earnings.

Conclusion

This is How to Make a Responsive Back to Top Button for Blogger with Progress Bar Animation. I hope you find this article interesting. Please spread the word about this article. And if you have any problems or questions about any of the sections, please leave them in the comments section. Thank you very much!

Farhan

Farhan

Hello there, My Name is Farhan and Welcome To My Website. My Passion is to Share Knowledge With Everyone. Also I am a Larner.

Next Post Previous Post
No Comment
Add Comment
comment url