How To Make Back To Top Button

Back To Top button serve as the name implied: to back at the top of the page. Sometimes you may want to use this type of button if your blog have long article. Like seriously, who want to scroll back to the top of the page after reading very long long long post?

This button can be made by combining 2 techniques: JQuery and CSS. JQuery served as the functional engine that make the button works, while CSS served as beautifier to make the button beautiful. In this post, i'll only explain the JQuery part. Assuming you already know how to apply CSS for the button. If you don't know a thing about CSS just use bootstrap. Read here to find how to install bootstrap template for blogspot.

Follow these steps below:
1. Import JQuery file to your blogspot. If you don't know how to do it, please read this first.
2. Paste this somewhere inside of the jQuery(document).ready(function() { }

$(window).scroll(function() {
  if($(window).scrollTop() > 50){
$(".backToTop").addClass("show");
  }
  else{ $(".backToTop").removeClass("show"); }
});
$(".backToTop").click(function() {
  $("html, body").animate({scrollTop:0}, "400");
});

3. Make the button HTML. You can do this using Add a gadget then choose HTML/Javascript on Layout section on your blogger Dashboard or directly on Edit HTML on the Theme section. Here the simple example of the button using bootstrap template and Font Awesome.

<div class="backToTop btn btn-primary" title="back to top"><i class="fa fa-arrow-up"></i></div>

4. Save your change.

---

Explanation

The orange part on step 2 is the class of the button. Make sure you put the class that match it like the orange part on step 3. The button won't work if the class is wrong.

The $(window).scroll(function() { }); on step 2 is event that works when the page is being scrolled. Inside it is the logic to show the button. The button will appear when the page is scrolled more than 50px, thanks to the $(window).scrollTop() > 50 code.

The $(".backToTop").click(function() { }); is the core of function. It works when the button is clicked. The html and body part inside of the event will make the html and body of the page scroll up to the position top: 0px; thanks to the property {scrollTop: 0}. The property 400 is the speed of scrolling animation in millisecond. The higher the number, the slower the speed. Default value is 400.

If you want to read deeper about this, read here.