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.
 |
| © 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 </body>.
<!-- 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!