Tutorial #7: Targeted Links

Here's a link to a target farther down this page.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.
...and here's the targeted link!
This is filler text.
This is filler text.
Now click here and go back to the top!
This is filler text.
This is filler text.
This is filler text.
This is filler text.
This is filler text.

How Does It Work?

Simple! The trick is in setting two anchors...one that is the original link, and the other that is the target. For example, to set a link that will allow users to go "Back to Top," you would do something like this:

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

However, that's only half the job. You must now set your target anchor. This is done by creating a "hot spot" that the browser recognizes but may or may not even include any text. In other words, your opening and closing <a> tags may surround nothing at all, or they may surround text and/or an image. In either regard, you have created a target, as follows:

<a name="top"></a>   or...
<a name="top">This is the top</a>

The trick to making it all happen is to establish a name for this target. The name can be anything. This name must appear in the original href, along with a # symbol preceding it. In the target anchor, instead of the href you would use name="", but remember to not include the # symbol.

If you follow the example, it should work perfectly. You may also View Source on this document to see how I created the two working examples.

Have fun jumping around your page!

 

MKT 444 Course Syllabus

Back to DrGerlich.com