Step to make Back To Top button with Rocket animation

How to add back to top button in website

Hello, visitors today we will figure out How to Make a Back To Top button with Rocket effect on a blogger that will give users to return to top when the button is pressed and release the rocket animation effect

This back to top catch will make it simpler for visitors to get back to the top page with only a single tick, this strategy is very helpful for bloggers who have extremely long articles. What makes it unique is animation and image used in button.

Instructions to Make a Back To top button with Rocket animation is described clearly below

Before you do the instructional exercise, kindly erase the default BACK TO TOP code from your layout, so there is no contention while applying this gadget.

Step to add button

1. Please login to blogger.com using your Gmail.

2. Go to the menu THEMES » click Edit HTML

3. Find this code by simply pressing ctrl + F (windows) or command + F (mac)

]]></b:skin>

and paste the code given below right ABOVE the code  ]]></b:skin>

#back-to-top{color:#fafafa}

.back-to-top{position:fixed!important;position:absolute;bottom:20px;right:20px;z-index:998}

.back-to-top:hover svg{transform:rotate(-45deg);margin:-1px}

.back-to-top:hover svg path{fill:#21ef8b}

.back-to-top svg{width:34px;height:34px;transition:transform .25s ease-out}

.tutop{color:#fafafa;font-size:1.4em;width:45px;height:45px;border-radius:100px;border:none;outline:0;background:#332d4f;z-index:999;bottom:20px;right:20px;padding:6px 9px;cursor:pointer}

4. Next, you simply copy and paste the code below, Just BELOW the code <footer>

<div class='back-to-top'><a href='#' id='back-to-top' title='back to top'>

<button class='tutop'><svg viewBox='0 0 29 24'>

<path d='M2.81,14.12L5.64,11.29L8.17,10.79C11.39,6.41 17.55,4.22 19.78,4.22C19.78,6.45 17.59,12.61 13.21,15.83L12.71,18.36L9.88,21.19L9.17,17.66C7.76,17.66 7.76,17.66 7.05,16.95C6.34,16.24 6.34,16.24 6.34,14.83L2.81,14.12M5.64,16.95L7.05,18.36L4.39,21.03H2.97V19.61L5.64,16.95M4.22,15.54L5.46,15.71L3,18.16V16.74L4.22,15.54M8.29,18.54L8.46,19.78L7.26,21H5.84L8.29,18.54M13,9.5A1.5,1.5 0 0,0 11.5,11A1.5,1.5 0 0,0 13,12.5A1.5,1.5 0 0,0 14.5,11A1.5,1.5 0 0,0 13,9.5Z' fill='#fff'></path>

</svg></button></a></div>

5. Once you have done with the code now the final stage is just copy and paste the following JS code, Just Above the code </body>

<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function(){200<$(this).scrollTop()?$("#back-to-top").fadeIn():$("#back-to-top").fadeOut()}),$("#back-to-top").hide().click(function(){return $("html, body").animate({scrollTop:0},1e3),!1});
//]]>

</script>

6. If you have done above, click SAVE icon which looks like this 



That's all this article about How to Make a Back To Top Button with Rocket Animation Effects for those of you who are still confused or have other questions about bloggers, please comment in the comments column below this article.