Table of Contents | Previous | Next | Index

# Anchor

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

Client-side object |
Implemented in | JavaScript 1.0 JavaScript 1.2: added `name`, `text`, `x`, and `y` properties

#### 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.

#### Description

If an `Anchor` object is also a `Link` object, the object has entries in both the `anchors` and `links` arrays.

#### Property Summary

Property | Description
--- | ---
    name
| A string specifying the anchor's name.
    text
| A string specifying the text of an anchor.
    x
| The horizontal position of the anchor's left edge, in pixels, relative to the left edge of the document.
    y
| The vertical position of the anchor's top edge, in pixels, relative to the top edge of the document.

#### Method Summary

This object inherits the `watch` and `unwatch` methods from `Object`.

#### Examples

Example 1: An anchor. The following example defines an anchor for the text "Welcome to JavaScript":

    <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>

#### See also

`Link`

## name

A string specifying the anchor's name.

Property of | `Anchor`
Read-only |
Implemented in | JavaScript 1.2

#### Description

The `name` property reflects the value of the `NAME` attribute.

#### Examples

The following example displays the name of the first anchor in a document:

    alert("The first anchor is " + document.anchors[0].name)

## text

A string specifying the text of an anchor.

Property of | `Anchor`
Read-only |
Implemented in | JavaScript 1.2

#### Description

The `text` property specifies the string that appears within the `A` tag.

#### Examples

The following example displays the text of the first anchor in a document:

    alert("The text of the first anchor is " + document.anchors[0].text)

## x

The horizontal position of the anchor's left edge, in pixels, relative to the left edge of the document.

Property of | `Anchor`
Read-only |
Implemented in | JavaScript 1.2

#### See also

`Anchor.y`

## y

The vertical position of the anchor's top edge, in pixels, relative to the top edge of the document.

Property of | `Anchor`
Read-only |
Implemented in | JavaScript 1.2

#### See also

`Anchor.x`

Table of Contents | Previous | Next | Index

Last Updated: 05/28/99 11:58:58

Copyright (c) 1999 Netscape Communications Corporation