How to Install Back to Top Button with SVG in Blogger

How to Install Back to Top Button with SVG in Blogger

Hello, Welcome to AS Themes World. Back to Top feature allows the user to quickly return to the top of the page without making too much effort. This feature has very important role for a site which have a long page content but some templates do not have this feature. So today in this post we will learn how to install Back to Top feature in Blogger template.

Steps to Install Back to Top Feature

Installing Back to Top feature in blogger is very easy process. Just follow the some simple steps carefully.

Step 1. CSS Codes

Search for the code ]]></b:skin> & paste the following codes above it.

/* Back To Top */ 
.backtotop{display:none;background:#282828;color:#fff;font-size:1.4em;width:40px;height:40px;line-height:40px;outline:0;z-index:999;
bottom:20px;right:20px;position:fixed;border-radius:5px;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:#282828}

Step 2. SVG & JavaScript

Now add the following two codes above to </body> tag.

SVG
 <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>
JavaScript
<script>
//<![CDATA[
$(function(){$(window).scroll(function(){$(this).scrollTop()>100?$(".backtotop").fadeIn():$(".backtotop").fadeOut()}),$(".backtotop").click(function(){return $("html,body").animate({scrollTop:0},400),!1})});
//]]>
</script>

Video Tutorial

Added Soon.....


Now Back to Top feature is added successfully and working properly. If there are questions or sections that are not understood, let us know in the comments.



Article "How to Install Back to Top Button with SVG in Blogger " protected

Post a Comment

Previous Post Next Post