Anchors Demo

By Chris Hester - 6 September 2004

This demo allows you to click on a part of the page to add an anchor there. A link is then created at the top of the page which will take you back to the anchor. To remove the anchor, just click on that part of the page again. Note: JavaScript is used, so make sure you have that turned on.

Browser Support (Windows XP)

Firefox 1.0.5 - superb
Mozilla 1.7 - superb
Opera 7.54 - anchors added but not removed
Opera 8.02 - anchors added and removed but with less text afterwards
IE6 - anchors added but not removed - styles not applied to links at top

Known Problems

Currently the technique only works on this demo page. It should be possible to make a script to add it to other pages once they've loaded. (I need to rewrite it to use an array of all the objects on the page, then apply the 'onclick' state to objects that way, rather than hard-coding it as I have done here.)

For now, there is a problem with using two tags at the start of a line - the link at the top copies the second opening tag along with the text, so it's possible to generate invalid code. But since the modified page only exists in the browser's memory, it can't easily be validated. (I believe one new browser allows for such pages to be saved out though.)

Sample Text

A sample paragraph here to illustrate this test. A sample paragraph here to illustrate this test. A sample paragraph here to illustrate this test. A sample paragraph here to illustrate this test.

Guess what? Another sample paragraph here to illustrate this test. A sample paragraph here to illustrate this test. A sample paragraph here to illustrate this test. A sample paragraph here to illustrate this test. A sample paragraph here to illustrate this test. A sample paragraph here to illustrate this test. A sample paragraph here to illustrate this test.

Header Here Too

Yet another sample paragraph here to illustrate this test. A sample paragraph here to illustrate this test. A sample paragraph here to illustrate this test. A sample paragraph here to illustrate this test. A sample paragraph here to illustrate this test. A sample paragraph here to illustrate this test. A sample paragraph here to illustrate this test.

A blockquote containing some text here. A blockquote containing some text here. A blockquote containing some text here. A blockquote containing some text here. A blockquote containing some text here. A blockquote containing some text here. A blockquote containing some text here. A blockquote containing some text here.

A further sample paragraph here to illustrate this test. A sample paragraph here to illustrate this test. A sample paragraph here to illustrate this test. A sample paragraph here to illustrate this test. A sample paragraph here to illustrate this test. A sample paragraph here to illustrate this test. A sample paragraph here to illustrate this test. A sample paragraph here to illustrate this test. A sample paragraph here to illustrate this test.

Try clicking on the empty paragraph below, which has been styled with a dashed border.