How to create a floating back to top button in Blogger?

Back to top button helps a reader to scroll up instantly with just one click.This post will tell you how to create a smooth back to top button using a Jquery plugin.The button will float using a bit CSS.One more feature that this plugin provide is when a reader is at top scroll means there is not more space above to scroll then the button will hide (fade out) and when there will a scrolling space available,the button will appear (fade in).

Follow the steps below to make it work.

If you do not have Jquery in your template then add the follow script just after <head>

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'/>

Now add the following script just before </head>

<script type='text/javascript'>//<![CDATA[
(function ($) {
$.fn.backToTop = function (options) {
var $this = $(this);
$this
.hide()
.click(function () {
$("body, html").animate({
scrollTop: "0px"
});
});
var $window = $(window);
$window.scroll(function () {
if ($window.scrollTop() > 0) {
$this.fadeIn(500);
} else {
$this.fadeOut(500);
}
});
return this;
};
})(jQuery);
//]]></script>
<script>
$(document).ready(function(){
$("#back-to-top").backToTop();
});
</script>