First of all we need to know why adding animation back to top button to website is necessary.
There are several reasons to use an animated back-to-top button in Blogger:
UX Improvements:
Pros: Scrolling through long blog posts is tedious, especially on mobile devices. Back-to-top buttons save readers time and effort by returning to the beginning. Simple navigation encourages readers to explore more of your blog This reduces site time and increases page views. Using a mouse to scroll long distances can be difficult for disabled users. Easy to navigate your content with animated buttons.
Visible Usage:
A well-designed animated button can make your blog more attractive. Match your blog's aesthetic with animations, colors and icons.
Brand Awareness:
Using a consistent animation or icon for your back-to-top button can help readers identify your blog.
Technical Edge:
Research shows that user experience can increase your website's SEO ranking. Small things like the back-to-top button can improve the user experience. Numerous animated back-to-top buttons are responsive and work well on desktop and mobile devices. This is very important due to the increase in mobile traffic. A static back-to-top button can also work, but animated buttons are more engaging and attractive. The choice to use an animated button depends on your needs and preferences.
To add this animation to the top button on your website after going to the Blogger dashboard, edit the theme. After going to the theme edit option, follow your steps.
Because you can recover if it crashes.
Then find ]]></b:skin> and paste the following CSS just above it, or you can paste it above the <head> tag by adding <style></style>.
/* Animation Back To Top Button */ .abtop{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} .abtop.vsbl{visibility:visible;opacity:1;transform:scale(1)}.abtop:hover{opacity:.8} .abtop svg{height:100% !important;width:100% !important;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);stroke-width:1.5;cursor:pointer} .abtop svg .b{fill:#fff;stroke:#e6e6e6;opacity:.9} .abtop svg .c{fill:none;stroke:#6200ee;stroke-dasharray:100 100;stroke-dashoffset:100;stroke-linecap:round} .abtop svg .d{fill:none;stroke:#08102b} .drK .abtop svg .b{fill:#2d2d30;stroke:#404045} .drK .abtop svg .c{stroke:#8775f5} .drK .abtop svg .d{stroke:#fffdfc}
Simply copy and paste the HTML and JavaScript code above the </body> tag.
<!--[ Animation Back To Top Button ]-->
<div class='abtop'>
<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>
<!--[ Animation Back To Top Button ]-->
<script>/*<![CDATA[*//* Animation Back To Top Button */ var prPt=document.querySelector(".abtop 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 t=document.documentElement.scrollTop,e=document.documentElement.scrollHeight-window.innerHeight;prPt.style.strokeDashoffset=ptLh-t*ptLh/e};updateProgress(),window.addEventListener("scroll",updateProgress);var offset=0;window.onscroll=function(){document.documentElement.scrollTop>offset?document.querySelector(".abtop").classList.add("vsbl"):document.querySelector(".abtop").classList.remove("vsbl")};
/*]]>*/</script>
Save theme or HTML.
In the end,
This tutorial on how to add animated progress to the top of a Blogger page should help you. If you have any questions, feel free to leave a comment, and don't forget to share it with your friends. Thanks for coming by, and have a great day!
Reference