Sunday, 16 August 2020

How to Install the Back To Top Button with SVG

How to Install the Back To Top Button with SVG

How to Install the Back To Top Button with SVG
Sunday, 16 August 2020

The Back To Top button with SVG functions the same as the back to top button as in the previous tutorial on this blog, the only difference is that the icon on this button uses an SVG which is lighter than the image format icon. This is one way to encourage users to browse more other content easily.

The Back To Top button with SVG has an important role for a site with content that has a long page content, for a site that has a lot of information on its page it will make other content skip without realizing it scrolls further down the page.

Alright, for those who want to install it please follow the steps below:

How to Install the Back To Top Button with SVG

The first step, open Blogger > Click the Themes menu > Click Edit HTML > Then add the code below just 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 two codes 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>

The next step Save the theme and see the results on your blog.

That's all for tips on How to Install the Back To Top Button with SVG , hopefully it's useful and issalam.
How to Install the Back To Top Button with SVG
4/ 5
Oleh

Comments