How to Install the Back To Top Button with SVG

How to Install the Back To Top Button with SVG

In this Blogger Tips, JainNews.in will share tips on How to Install the Back To Top Button with SVG. Maybe you already know the main function of the Back To Top button that makes it easy for blog visitors to return to the top instantly without having to scroll pages manually, surely this will greatly help visitors when opening a page with long article content to return to the top menu instantly.

For those of you who are curious about how to install it on a blog, let's follow the steps below.

How to Install the Back To Top Button with SVG

First, open Blogger > Click the Themes menu and Edit HTML button > Add this code before </head>

<style>
/* Back To Top */
.backtotop{display:none;background:#3c6382;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:#0a3d62}
</style>

Next add the code below before </body>

<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>

Then click the Save theme button and see the results on your blog.