How to Add a 'Go to Top' and 'Go to Bottom' Image link to your Blogger Blog

Adding a 'Go to Top' and 'Go to Bottom' link to your blog will help your visitors easily traverse your blog page. If you have a long post and soe reader wants to go to top or bottm instantly, he needs to scroll all the way up and down which consumes time. If you add a link to go to Top and Bottom which will float accrding to your visitor moves around your blog post, will it not be cool? The reader can instantly go to Top and Bottom in just one click. Here is how you can do so in your blog. just follow these steps and thank me.
Step 1: Log in to your Blogger account dashboard.
Step 2: Go to Template, click on the Edit HTML button.
Step 3. Check the "Expand Widget Templates" box.
Step 4. Search (You can use shortcut using Ctrl+f and entering the code below in the searchbox) for the following piece of code:

]]></b:skin>

Step 5: Copy the following javascript code and paste it just above this code, :

/* Go to Top and Bottom jQuery by http://learnatleisure.blogspot.com ----------------------------------------------- */
.button_up{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7QV8Mbw58UapP9551rpYiUvyTrdhwb3IeCxS7J5JjuiICWxpBpyIfRBQKcKNXt1X0tJvKApRlZLRhAOjsPBTEB7GLTvBHOk6l9AifZhrEsaY2C1aZunXHKG6bSvQ-SaNwp9HuVwcdzlQ/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:280px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7; 
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.button_down{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRImed0M78EBD49Lm0gwFKtzEQuMjQg4LX3HVzCfRHnbLZ34anwpMb-NxpJymCYVxri_m1Wz5I5idfTKkyubZygvnss644R0mL1utK9e5FsYSKLkp2BU3hA4gIhg1G9RKqOI1zFSs1Iys/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:242px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

Note: - You can change the arrows by changing the URLs in blue.
- To change the buttons background color of buttons, change the white text with your color.
Step 6: Now search (use shortcut Ctrl + f) for this tag:

</body>

Step 7. And just above it, paste the following code which will add the jQuery plugin to your blog. If you have previously installed the jQuery plugin, then you may ommit the first line of code.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<div class='button_up' id='button_up' style='display:none;'/>
<div class='button_down' id='button_down' style='display:none;'/>

<script>
//<![CDATA[
(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();

$(function() {
var $elem = $('body');
$('#button_up').fadeIn('slow');
$('#button_down').fadeIn('slow'); 
$(window).bind('scrollstart', function(){
$('#button_up,#button_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#button_up,#button_down').stop().animate({'opacity':'1'});
});
$('#button_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
$('#button_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]>
</script>

Step 8: You are almost done. Save your Template. Happy Blogging! :)