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

Adding a "go to top" or "go to bottom" button in a blog makes it user friendly and also helps the readers to scroll up and down immediately. This button given here goes to top or goes to bottom with a "scroll". To do this, you need to add some HTML codes to your blogger template. Follow these simple steps to add a "go to top" and "go to bottom" to your blog.

1) Go to Blogger Dashboard → Design → Edit HTML
2) Now Find the code shown below using [ctrl+F] (Use In HTML Box)
 

]]></b:skin>

3) Now Paste the Code Shown Below just Befor it.

.Pc_Tools_Tips_button_up{
padding:7px;
background-color:white;
border:1px solid #CCC;
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9xYdTc_l2VFux7gZeyTh6yTbRhq0HhHPPd59X16kxIdF5xwN2DFWrXjdYePfTaEb43gpRkl1EyynZGKHzSlk3GQeTd-EpfUq1VXm8PgztwlDAHdmCWjYGJHShXD5enPnEYvPky2YVLfo/h120/Pc+Tools+Tips.png) no-repeat top left;
background-position:50% 50%;
width:20px;
height:20px;
bottom:280px;
right:5px;
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.Pc_Tools_Tips_button_down{
padding:7px;
background-color:white;
border:1px solid #CCC;
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4BdjjWArHBXXW9TEVURZC8yJrlKrouYfpGhL-lTZyIsqX8niZsbA9HnqqrC6YhQg_HtR4_6DBDHAe4PUalIsm3XXg-I4LLjcVSUrjTqqcmh028hxC0ESTkRBjND9737Pgugrc-H_XE3g/h120/Pc+Tools+Tips.png) no-repeat top left;
background-position:50% 50%;
width:20px;
height:20px;
bottom:242px;
right:5px;
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
 4) Now Find the code shown below using [ctrl+F] (Use In HTML Box)

</body>

5) Now Paste the Code Shown Below just Befor it.

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

<div class='Pc_Tools_Tips_button_up' id='Pc_Tools_Tips_button_up' style='display:none;'/>
<div class='Pc_Tools_Tips_button_down' id='Pc_Tools_Tips_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');
$('#Pc_Tools_Tips_button_up').fadeIn('slow');
$('#Pc_Tools_Tips_button_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#Pc_Tools_Tips_button_up,#Pc_Tools_Tips_button_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#Pc_Tools_Tips_button_up,#Pc_Tools_Tips_button_down').stop().animate({'opacity':'1'});
});
$('#Pc_Tools_Tips_button_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
$('#Pc_Tools_Tips_button_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]>
</script>

 6) Now Save Your Template.