Automated Links

You are here: irt.org | Articles | JavaScript | Location | Automated Links

Published on: Saturday 29th March 1997 By: Martin Webb

Creating automated links between sections of the same document can be easily performed using JavaScript.

Within a document you must first define the top using the <a>, i.e. the Anchor tag:

<html>
<body>
<a name="top"></a>

This then creates an internal link which can be navigated to using the following syntax:

<a href="#top">Top</a>

We can extend this to include links to either the next or last anchor, for example:

<a href="#3">Next</a>
<a name="2"></a>
<a href="#1">Last</a>

Using JavaScript these can be automatically generated using a function a counter and multiple calls to the funtion.

First define the count variable:

<script language="JavaScript"><!--
var link = 0;

...

Followed by the links() function that will do all the work:

...

function links(next) {
  if (!next)
    document.write('<a name="end"></a>');

  document.write('<a href="#top">Top</a> | ');
  document.write('<a href="#',link-1,'">Last</a> | ');
  document.write('<a name="',link++,'"></a>');
  document.write('<a href="#',link,'">Next</a> | ');
  document.write('<a href="#end">End</a>');
}
//--></script>

The 1st line will only create an anchor called end if the parameter passed to the links() function is false.

The 2nd line of the function create a links to the top anchor already created within the document.

The 3rd line creates a link back to the previously defined anchor created by the links() function.

The 4th line creates a new anchor each time the links() function is called. The name of the new anchor is based on the value of link, which is then incremented by +1.

The 5th line creates a link to the next anchor that will be created by the links() function.

The 6th line creates a links to the end anchor already created within the document.

To produce automated links within a document then the following HTML must be placed where a new link is required:

<script language="JavaScript">links(true);</script>

or for the last link:

<script language="JavaScript">links(false);</script>

Obviously this will always show the text ' Top | Last | Next | End ' even when the document is currently at the top or end.

As this is untidy the links() function can be further extended to show only ' Next | End ' when the document is at the top, and only ' Top | Last ' when the document is at the bottom:

<script language="JavaScript"><!--
var link = 0;

function links(next) {
  if (!next)
    document.write('<a name="end"></a>');

  document.write('<center><font size=-1><hr>');

  if (link != 0) { 
    document.write('<a href="#top">Top</a> | ');
    document.write('<a href="#',link-1,'">Last</a>');
  }

  if ((link != 0) && (next))
    document.write(' | ');

  document.write('<a name="',link++,'"></a>');

  if (next) {
    document.write('<a href="#',link,'">Next</a> | ');
    document.write('<a href="#end">End</a>');
  }

  document.write('</font></center>');
}
//--></script>

Feedback on 'Automated Links'

Automated Links - Roger Norum 10:55:47 3/29/99

View the profile on Martin Webb and the list of other Articles by Martin Webb.

What's New

How to do the impossible with Google Gears

Out and About

Last Updated: 21st December 2007. Maintained by: Martin Webb
irt.org liability, trademark, document use, privacy statement and software licensing rules apply.