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.

Comments Post a Comment

seo packages - March 17, 2010

im learning this thing...makin some changes to my blog...thanks for this one, simple and clear..

quickheed - March 27, 2010

Seo header tags is the major part in seo. It is recommeded to use atleast one h1 tag in the page. And if you use that heading tag for the targetted keyword. The page will get optimized quickly. This is an important factor in onpage seo.

seo header tags

luigi - August 08, 2010

Sorry, is it possible to link a point of the page instead the top?
For example, i have some references at the end of the page(a href=#ref_up_1 ) linked with the notes in the text ( a href=#ref_down_1 ).
How can i use the same code "click" function to scroll between them?
thank you!

P.s.: i'm using your neotheme for wordpress

Leave a Comment