How To make "Go To Top" Link | Blogger JQuery Tips

Some of my visitors suggest me to write an article on how to put a "Go To Top" navigation link on Blogger. There are many ways to do it. I have used JQuery here. If a page is very large in height then one has to use scrollbar for moving bottom to top. Instead of scrolling, Blogger can provide a link for visitors which will move the the page to top by just one click. It will just make your blog or site more user friendly,flexible and professional.
1.Login to your blogger dashboard--> layout- -> Edit HTML
2.Scroll down to where you see </head>tag .
3.Copy below code and paste it just before the </head> tag.

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

<script type='text/javascript'>

//<![CDATA[

/*
Author: mg12
Update: 2008/05/05
Author URI: http://www.neoease.com/
*/
(function() {

function $(id) {
return document.getElementById(id);
}

function setStyleDisplay(id, status) {
$(id).style.display = status;
}

function goTop(a, t) {
a = a || 0.1;
t = t || 16;

var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 0;
var x3 = 0;
var y3 = 0;

if (document.documentElement) {
x1 = document.documentElement.scrollLeft || 0;
y1 = document.documentElement.scrollTop || 0;
}
if (document.body) {
x2 = document.body.scrollLeft || 0;
y2 = document.body.scrollTop || 0;
}
var x3 = window.scrollX || 0;
var y3 = window.scrollY || 0;

var x = Math.max(x1, Math.max(x2, x3));
var y = Math.max(y1, Math.max(y2, y3));

var speed = 1 + a;
window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));
if(x > 0 || y > 0) {
var f = "MGJS.goTop(" + a + ", " + t + ")";
window.setTimeout(f, t);
}
}

function switchTab(showPanels, hidePanels, activeTab, activeClass, fadeTab, fadeClass) {
$(activeTab).className = activeClass;
$(fadeTab).className = fadeClass;

var panel, panelList;
panelList = showPanels.split(',');
for (var i = 0; i < panelList.length; i++) {
var panel = panelList[i];
if ($(panel)) {
setStyleDisplay(panel, 'block');
}
}
panelList = hidePanels.split(',');
for (var i = 0; i < panelList.length; i++) {
panel = panelList[i];
if ($(panel)) {
setStyleDisplay(panel, 'none');
}
}
}

function loadCommentShortcut() {
$('comment').onkeydown = function (moz_ev) {
var ev = null;
if (window.event){
ev = window.event;
} else {
ev = moz_ev;
}
if (ev != null && ev.ctrlKey && ev.keyCode == 13) {
$('submit').click();
}
}
$('submit').value += ' (Ctrl+Enter)';
}

function getElementsByClassName(className, tag, parent) {
parent = parent || document;

var allTags = (tag == '*' && parent.all) ? parent.all : parent.getElementsByTagName(tag);
var matchingElements = new Array();

className = className.replace(/\-/g, '\\-');
var regex = new RegExp('(^|\\s)' + className + '(\\s|$)');

var element;
for (var i = 0; i < allTags.length; i++) {
element = allTags[i];
if (regex.test(element.className)) {
matchingElements.push(element);
}
}

return matchingElements;
}

window['MGJS'] = {};
window['MGJS']['$'] = $;
window['MGJS']['setStyleDisplay'] = setStyleDisplay;
window['MGJS']['goTop'] = goTop;
window['MGJS']['switchTab'] = switchTab;
window['MGJS']['loadCommentShortcut'] = loadCommentShortcut;
window['MGJS']['getElementsByClassName'] = getElementsByClassName;

})();


//]]>

</script>

4.Now scroll down where you see </body> tag.


5.Copy below code and paste it just before the </body> tag.

<a href='#' onclick='MGJS.goTop();return false;'><b>Go To Top</b></a>

6.Click on save template and you are done. I hope you have enjoyed it.