How to Add Scroll/Back to Top Button in Blogger

For better user interface you need to add scroll/back to top button for Blogger and it is very easy to do with adding jQuery and Font Awesome icon.

Learn how to add back to top button for Blogger

To add scroll to top button on your website follow these instructions:

If you have already registered any of the following, then no need to reinstall. You should skip that.

Step-1: Add jQuery to your website or blog.
If you are using Blogger then go to Blogger Dashboard→Theme→Edit HTML and search for </head>
Then put the following code just above it.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'/>

If you are using Wordpress or other then put the above code into your main.js or main javascript code.
Step-2: Add font awesome to your website or blog.
Installing font awesome to your website will give you more benefit for better user interface icon.
To install font awesome just add the following code before <title> tag.

<link crossorigin='anonymous' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' integrity='sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN' rel='stylesheet'/>

Step-3: Back to Top HTML Code for Blogger: Add the following code just before </body> tag and save your blogger theme.

<div class='scroll' title='Click to Slide Down'><a class='scrollToTop' href='/'><i class='fa fa-arrow-circle-up'/></a></div>

For Wordpress copy the above instruction for your footer.php or find the php file of footer section.
Step-4: Custom Back to Top Button:
Add the following CSS to your CSS file. For Blogger search for ]]></b:skin> and put the following CSS just before it.

/*************SCROLL TOP BUTTON*****************/
.scrollToTop {
  text-align: center;
  font-weight: bold;
  text-decoration: none;
  position: fixed;
  top: 84%;
  right: 5%;
  background: transparent;
  color: #D43838;
  font-size: 48px;
}

.scrollToTop:hover{
  text-decoration:none;
}

.scroll a:hover{text-decoration:none;color:#D43838}
.scroll a:visited{color:#D43838}

You can customize this CSS as you want.

You have finished.

Have got this article helpful or not working? Put your comment below.