Anchor

A place in a document that is the target of a hypertext link.

Client-side object

Implemented in
Navigator 2.0

Created by

Using the HTML A tag or calling the String.anchor method. The JavaScript runtime engine creates an Anchor object corresponding to each A tag in your document that supplies the NAME attribute. It puts these objects in an array in the document.anchors property. You access an Anchor object by indexing this array.

To define an anchor with the String.anchor method:

theString.anchor(nameAttribute)

where:

theString
A String object.

nameAttribute
A string.

To define an anchor with the A tag, use standard HTML syntax. If you specify the NAME attribute, you can use the value of that attribute to index into the anchors array.

<A NAME="javascript_intro"><H2>Welcome to JavaScript</H2></A>

If the preceding anchor is in a file called intro.html, a link in another file could define a jump to the anchor as follows:

<A HREF="intro.html#javascript_intro">Introduction</A>

Example 2: anchors array. The following example opens two windows. The first window contains a series of buttons that set location.hash in the second window to a specific anchor. The second window defines four anchors named "0," "1," "2," and "3." (The anchor names in the document are therefore 0, 1, 2, ... (document.anchors.length-1).) When a button is pressed in the first window, the onClick event handler verifies that the anchor exists before setting window2.location.hash to the specified anchor name.

link1.html, which defines the first window and its buttons, contains the following code:

<HTML>
<HEAD>
<TITLE>Links and Anchors: Window 1</TITLE>
</HEAD>
<BODY>
<SCRIPT>
window2=open("link2.html","secondLinkWindow",
   "scrollbars=yes,width=250, height=400")
function linkToWindow(num) {
   if (window2.document.anchors.length > num)
      window2.location.hash=num
   else
      alert("Anchor does not exist!")
}
</SCRIPT>
<B>Links and Anchors</B>
<FORM>
<P>Click a button to display that anchor in window #2
<P><INPUT TYPE="button" VALUE="0" NAME="link0_button"
   onClick="linkToWindow(this.value)">
<INPUT TYPE="button" VALUE="1" NAME="link0_button"
   onClick="linkToWindow(this.value)">
<INPUT TYPE="button" VALUE="2" NAME="link0_button"
   onClick="linkToWindow(this.value)">
<INPUT TYPE="button" VALUE="3" NAME="link0_button"
   onClick="linkToWindow(this.value)">
<INPUT TYPE="button" VALUE="4" NAME="link0_button"
   onClick="linkToWindow(this.value)">
</FORM>
</BODY>
</HTML>

link2.html, which contains the anchors, contains the following code:

<HTML>
<HEAD>
<TITLE>Links and Anchors: Window 2</TITLE>
</HEAD>
<BODY>
<A NAME="0"><B>Some numbers</B> (Anchor 0)</A>
<UL><LI>one
<LI>two
<LI>three
<LI>four</UL>

<P><A NAME="1"><B>Some colors</B> (Anchor 1)</A>
<UL><LI>red
<LI>orange
<LI>yellow
<LI>green</UL>

<P><A NAME="2"><B>Some music types</B> (Anchor 2)</A>
<UL><LI>R&B
<LI>Jazz
<LI>Soul
<LI>Reggae
<LI>Rock</UL>

<P><A NAME="3"><B>Some countries</B> (Anchor 3)</A>
<UL><LI>Afghanistan
<LI>Brazil
<LI>Canada
<LI>Finland
<LI>India</UL>
</BODY>
</HTML>

Anchor

Created by

Description

Properties

Methods

Examples

See also