How to Add Go to Top and Bottom Navigation Button using jQuery

Navigation buttons help your blog visitors to navigate easily among contents of your blog. When you have a long blog post which spans below the usually visible viewport of the browser, the reader must have to scroll below to find what is below the viewport. So, scrolling to bottom he reads your blog post, and if he want to come back to Top he again needs to scroll up. What if there is a shortcut at the bottom of your page which directs the readers to Top of the page when clicked? this should be nice right? You can use HTML tag to add a button at bottom or top of your page to use as a top and bottom navigator. But using jQuery, you can stylify the buttons and your readers will also be impressed with a fancy look of your blog. This buttons also helps your visitors to navigate when a main page has lots of contents or posts displayed in it. Here, I am going to tell you how you can add a ‘Go to Bottom’ and ‘Go to Top’ navigator button to your blogger blog. I am going to describe the whole thing step by step.
Step I: You obviously need to log into your Blogger account and select the appropriate Dashboard of the blog where you want to make the changes.
Step II: Go to Template and Click on Edit HTML. Click ‘Proceed’ if required.
Step III: Press CTRL+F and find ]]>

Step IV: Just above this, copy and paste the following code snippet:

/* Go to Top and Bottom Buttons with jQuery by TechBhuvan*/
.button_up{
padding:7px; 

/* Distance between the border and the
icon. you may change according to your choice  */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white 
url

(http://4.bp.blogspot.com/-UnMFYoCWxx4/Uqw4nN8VyzI/AAAAAAAABYY/

rALbiar5mNY/s1600/scroll-to-top.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
(http://3.bp.blogspot.com/-lCFVt3QT1XQ/Uqw4nObSTEI

/AAAAAAAABYU/GZwEaQ3AoQg/s1600/gotobottom.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);
}

You can change the credentials according to your choice, just go through the comments and you will understand which one is used for what. You can replace the arrows with your own arrow image, Just replace the links in the url([http://url]).
Step V: Now press CTRL+F again and search for

</body>

Step VI: Just above the closing body tag, copy and paste the following code snippet:

<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 VII: Save your Template. You are done. To see the code is working or not, open your blog in the browser and see yourself.

There is another method to insert the Scroll to top button. Here it goes.
Step I: Log in to Blogger Dashboard, Go to Layout and Add an HTML/Javascrpt Gadget.
Step II: Copy and paste the following code to the HTML/Javascript gadget.

<script type="text/javascript" 

src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script> 
<script type="text/javascript" > 
var scrolltotop={ //startline: Integer. Number of pixels 

//from top of doc scrollbar is scrolled before showing control 
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). 
How far to scroll document up when control is clicked on (0=top). 
setting: {startline:100, scrollto: 0, scrollduration:1000, 

fadeduration:[500, 100]}, 
controlHTML: '<
img src=
"https://lh4.googleusercontent.com/-6Y8MPUpGYpU/USzs5rEhNsI/AAAAAAAADvk/
iXzptu4bODg/h120/scroll-to-top.png" />', 
//HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
 controlattrs: {offsetx:5, offsety:5},
 //offset of control relative to right/ bottom of window corner anchorkeyword: '#top', 
//Enter href value of HTML anchors on the page that should also act as "Scroll Up"
 links state: {isvisible:false, shouldvisible:false}, 

scrollup:function(){ if (!this.cssfixedsupport)
 //if control is positioned using JavaScript

// this.$control.css({opacity:0})
 //hide control immediately after clicking it 

var dest=isNaN(this.setting.scrollto)? 
this.setting.scrollto : parseInt(this.setting.scrollto)

 if (typeof dest=="string" && 
jQuery('#'+dest).length==1)

 //check element set by string exists dest=jQuery('#'+dest).offset().top 
else dest=0 this.$body.animate({scrollTop: dest},

 this.setting.scrollduration); },
 keepfixed:function()
{ var $window=jQuery(window) var controlx=$window.scrollLeft() 
+ $window.width() - this.$control.width()
 - this.controlattrs.offsetx
 var controly=$window.scrollTop() + $window.height() - this.$control.height()
 - this.controlattrs.offsety this.$control.css({left:controlx+'px', top:controly+'px'}) },
 togglecontrol:function()
{ var scrolltop=jQuery(window).scrollTop() if (!this.cssfixedsupport) 
this.keepfixed()
 this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
 if (this.state.shouldvisible && !this.state.isvisible)
{ this.$control.stop().animate({opacity:1},
 this.setting.fadeduration[0]) this.state.isvisible=true }
 else if (this.state.shouldvisible==false && this.state.isvisible)
{ this.$control.stop().animate({opacity:0}, 
this.setting.fadeduration[1]) this.state.isvisible=false } },
 init:function(){ jQuery(document).ready(function($)
{ var mainobj=scrolltotop

 var iebrws=document.all mainobj.cssfixedsupport=!iebrws
 || iebrws && 
document.compatMode=="CSS1Compat"
 && window.XMLHttpRequest
 //not IE or IE7+ browsers in standards mode mainobj.$body=(window.opera)? 
(document.compatMode=="CSS1Compat"? $('html')
 : $('body')) : $('html,body') 
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>') 
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', 
bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, 
cursor:'pointer'}) .attr({title:'Scroll Back to Top'})
 .click(function(){mainobj.scrollup(); return false}) .appendTo('body') 
if (document.all && !window.XMLHttpRequest && 
mainobj.$control.text()!='')
 //loose check for IE6 and below, plus whether control contains any text
 mainobj.$control.css({width:mainobj.$control.width()}) 
//IE6- seems to require an explicit width on a DIV containing text mainobj.togglecontrol() 
$('a[href="' + mainobj.anchorkeyword +'"]').
click(function(){ mainobj.scrollup() return false }) 
$(window).bind('scroll resize', 
function(e){ mainobj.togglecontrol() }) }) } }
 scrolltotop.init() </script>