 |
| Back to Top Button with SVG |
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><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.