How to Install the Back To Top Button with SVG

How to Install the Back To Top Button with SVG

How are you, friend Sayem Tutorial, hopefully in good health? It's also been a long time since I updated the post here maybe because of offline activity and also when I was online I only checked related to the Blogger template on Idntheme.


In this Blogger Tips, Sayem Tutorial 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.

See the Pen
Cara Memasang Tombol Back To Top dengan SVG by Arlina Design (@arlinadesign)
on CodePen.