Archives

Wednesday, August 24, 2016

How to add a 'Back to Top' button on your blog with smooth scrolling (for Blogger)

  • , ,   • Comments

This isn't something new, I picked this up from here and thought I should make a guide of my own specifically for Blogger users like myself.
Features:
  • 'Back to Top' button that fades into view at the bottom right corner of the page as you scroll down
  • Fades out when you reach the top
  • Smooth scrolling
  • HTML, CSS, JQuery, FontAwesome
Code:
Part 1: CSS

On Blogger >> Dashboard >> Template >> Edit HTML
Go to the CSS section of your blog and insert the code below:

.back-to-top {
    display:none;
    position: fixed;
    bottom: 2em;
    right: 10px;
    text-decoration: none;
    color: rgb(207, 72, 94);
    font-size: 12px;
    padding: 1em;
}

.back-to-top:hover {
    text-decoration:none;
    color: rgba(207, 72, 94, 0.8);
}

If you can't find where to put it, search for this ]]></b:skin> and paste the code above it.

You can edit the color and size of the button by changing the values in red and blue respectively. Unless you want a different hover color, keep the two RGB values the same. The alpha value (0.8) tells how transparent the button becomes when you hover on it.
Part 2: JQuery

Still inside the HTML code, paste the code below inside the <head> portion of your template

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

If it's already existing, no need to do this.

Part 3: HTML

 Still inside the editor, paste the code below directly above the </body> tag.

<a href="#" class="back-to-top">Back to Top</a>
<script>
 jQuery(document).ready(function(){
  var offset = 220;
  var duration = 500;
  jQuery(window).scroll(function(){
   if (jQuery(this).scrollTop() > offset) {
    jQuery('.back-to-top').fadeIn(duration);
   } else {
    jQuery('.back-to-top').fadeOut(duration);
   }
  });

  jQuery('.back-to-top').click(function(event){
   event.preventDefault();
   jQuery('html, body').animate({scrollTop: 0}, duration);
   return false;
  })
 });
</script>

You may replace 'Back to Top' with any icon you want. In my case, I used an icon from FontAwesome and replaced the text in purple with this:

<i aria-hidden='true' class='fa fa-arrow-circle-up' style='font-size:50px'/>

Bonus: FontAwesome

It's basically a set of web fonts featuring scalable vector icons. In short, just a bunch of icons turned into fonts so you don't need to use an image every time you need one. Awesome!

To use FontAwesome, you must first install it like you did with JQuery by adding the line below inside the <head> portion of your template

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css' rel='stylesheet'/>

 Then choose the icon you want from here and get the corresponding markup in order to display it.
Done!
Save the HTML code of your blog and check to see if it works. :)
Share: