Javascript Back Link

I’ve recently had need to add on-page links to replicate the ‘back’ button in the browser.

Normally, I avoid using javascript for navigation in this way, but it seems like the best solution in this case. However, I couldn’t find a version of the code which worked consistently accross browsers.

Finally, result number 20 or so in Google (amongst many other pages with others asking about the same problem) turned up this page: www.irt.org/script/911.htm which seems to work well (tested in FF 1.5 and IE 6).

I’ve added the following function to the javascript file:

// go back to previous page function
function goBack() {
history.back();
}

And use the following code in the HTML:

<a href="#" onClick="this.href='javascript:goBack()'" title="Go back to the previous page">&laquo; Back to previous page</a>

Previously, I had tried using onclick="javascript:history.go(-1);" and onclick="history.back();", and a number of variations with the javascript in the href attribute or onclick event or in an external function, but none of them gave consistent results – most didn’t work at all.

If anyone understands enough about javascript to tell me why onClick="this.href='javascript:goBack()'" works, please leave a comment!

Using Jump Menus

Jump menus are a compact way of providing a list of links to the user. You are presented with a dropdown list where the items listed behave as links, you click on them and off you go to a new page.

These lists are often presented as ‘Quick Links’ to highlight important pages in a site or as ‘Site Navigation’ but you could present them in many other ways. On Gifford Plumbing Services (my brother’s site) I’ve used them to highlight the areas he covers.

The jump menu uses a HTML select form with a small bit of javascript. Here is the HTML code:


<form name="JumpMenuForm">
<select name="JumpMenu" onchange="MM_jumpMenu('parent',this,0);MM_jumpMenu('parent',this,0)">
<option selected="selected">Select Link...</option>
<option value="Link1">Link 1</option>
<option value="Link2.htm">Link 2</option>
<option value="Link3.htm">Link 3</option>
<option value="Link4.htm">Link 4</option>
<option value="Link5.htm">Link 5</option>
</select>
</form>


And the javascript:

function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}


If you use Dreamweaver, you can easily add the above code by going to Insert > Form > Jump menu. This allows you to add the list items and links and then inserts the HTML code for the form).

Then go to the Behaviours panel and you should see ‘Jump Menu’ listed. Select this, then click on the ‘Add behaviour’ button and select ‘Jump Menu’ from the list. This adds the javascript to the head of your document.

One problem is that I don’t think Jump Menus are search engine friendly – search engines such as Google can’t follow the links. This is not a problem as long as you link to the pages elsewhere in your site, i.e. your site map.