Add Smooth Back to Top Button In Blogger

 How to Add Smooth Back to Top Button In Blogger

Hello welcome to websduniya, i am back again with another valuable content. Actually this isn’t something new, but this is the something different from others. Back to Top is a simple button that allows users to go to the top of the page easily by clicking. This button Generally called as a scroll to top button. this is very useful widget to user experiences so don't avoid this widget you must need install this widget for your blog.

Add Smooth Back to Top Button In Blogger

What's New : Simple Clean Coded, Lightweight, Responsive, Not Need To Add jQuery, It's Made With Pure JavaScript.

How to add back to top Button in your blogger : 

Let's learn how it implement this scroll to top button perfectly

♦ Go to Blogger >> Dashboard >> Template >> Edit HTML

Then Search ]]></b:skin>

 html {scroll-behavior:smooth;}
.backtotop{display:none;position:fixed;background:#1D8FFA;color:#fff;font-size:1.4em;width:40px;height:40px;line-height:40px;outline:0;z-index:999999999;bottom:20px;right:20px;border-radius:50px;padding:0;text-align:center;cursor:pointer;opacity:1;transition:all .25s}.backtotop svg{width:24px;height:24px;transform:rotate(90deg);vertical-align:middle;transition:all .25s}.backtotop:hover{background:#0D74D4}
 

♦Paste CSS code above that tag.

♦Next search for </body> tag after find that tag paste html code above that tag.

 <div class='backtotop hide'><svg viewBox='0 0 24 24'>
  <path d='M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z' fill='#fff'/>
</svg></div> 

♦Final and last steps copy JavaScript code paste same as </body> tag above.

 document.addEventListener("scroll",(function(){var o=window.scrollY||document.documentElement.scrollTop,e=document.querySelector(".backtotop");e.style.display=o>100?"block":"none"}));var backToTopElement=document.querySelector(".backtotop");backToTopElement.addEventListener("click",(function(){document.documentElement.scrollTop=0,document.body.scrollTop=0})); 

Save the template of your blog and check to see if it works. 

DOWNLOAD RAW/SOURCE CODE FROM HERE FOR PERFECTLY WORK

Features of this back to top button widget:

• Back to Top button that view at the bottom right corner.
• Responsive (Showing in all device)
• Lightweight (Doesn't effect your blog loading, because this is not required jQuery)
• Fades out when you reach the top
• Smooth scrolling
• Inbuilt with HTML, CSS, SVG

Author Note : 

Hope this article may be helpful for you, so don't forgot to like and share. keep in touch with us.

Any issues  or help comments below we are glad/appreciate to help you.