Satya Ki Pathshala

Home
Blogger

How to Create an Animated Floating Back To Top on a Blogger Website | Satya Ki Pathshala

How to Create an Animated Floating "Back To Top" on a Blogger Website. I am using a Blogger Template from Piki Templates. The Back to Top Button was s
Hello everyone! Welcome. Today I will tell you How to Create an Animated Floating "Back To Top" on a Blogger Website. I am using a Blogger Template from Piki Templates. The Back to Top Button was simply a text effect in this template. So, I decided to change it.

Today in the article How to Create an Animated Floating "Back To Top" on a Blogger Website, I am going to tell you the complete process of doing that and will provide you the scripts which you can also apply to your Blogger Website.

How to Create an Animated Floating Back To Top on a Blogger Website | Satya Ki Pathshala

In most of the Blogger Templates today, the Back To Top button is not attractive. The back to Top button makes a good impact on your website visitors. It is used for a good user experience. It makes your website or Blogs more attractive.

(toc)

What is Back to Top Button in Blogger Website

Back to Top Button is used in a blogger website for easy navigation. By clicking the Back to Top Button button, the visitor can directly go to the top of the webpage. Suppose you have a long webpage that the user is reading.

Now, if the user thinks to go to the top of the page from the middle or end of the page, then he has to scroll it downwards multiple times, which is really time-consuming for him. So, this process makes a bad impact on the user.

To solve this issue and for a good user experience, we use this Back to Top Button by using simple HTML, CSS & JavaScript.

You may also like:

How the Back to Top button works

The back-to-top button will be visible on the bottom right corner of every web page of the blogger's website and will automatically be adjusted depending on the devices being used. The button comes with an animation effect.

I mean if you hover the button, you will see animation like the rocket icon moves 45 degrees left by moving the page upwards.

Now I'll tell you how you can apply the codes to an Animated Floating Back To Top on a Blogger Website.

How to add an Animated Floating Back To Top on Blogger

Step 1 :    First, go to your Blogger Dashboard.
Step 2 :    Click on the Edit HTML section, this will open the code section of your Blogger Theme.
Step 3 :    Now find ]]></b:skin> tag in Blogger Theme.
Step 4 :    Now copy the below CSS Code and paste it above ]]></b:skin>

/* Back to top By SK.com */
#SK-back-to-top{color:#fafafa}
.SK-back-to-top{position:fixed!important;position:absolute;bottom:20px;right:20px;z-index:998}
.SK-back-to-top:hover svg{transform:rotate(-45deg);margin:-1px}
.SK-back-to-top:hover svg path{fill:#ffff00}
.SK-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} (code-box)

Step 5 :    Now find "backTop" on the Blogger Theme and replace the <div> tag by following HTML Code.

<div class='SK-back-to-top'><a href='#' id='SK-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> (code-box)
</svg></button></a></div>

Step 6 :    Now find </body> tag in your blogger theme.

Step 7 :    Copy the below JavaScript Code and paste it above </body> tag.

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

Step 8 : Now save your Blogger Theme.

Well Done! You have now successfully implemented the Back to Top Button on your Blogger Website.

Final Words

Well if you like this article then let me know in the comment section below. If you are facing any problems regarding implementing this process in your template then follow the video tutorial which I am going to attach to this post soon.

To meet the other Bloggers and to get more Scripts for the blogger websites, please join my Telegram Group. In this group, I share many more things which I am not able to publish on my site.

Sharing is caring! If you like the article How to Create an Animated Floating Back To Top on a Blogger Website, then don't forget to share this article with others. I'll see you in the next post. Till then, take care.