Fragment link not working

Question

Total newbie question, but I cant figure out what im doing wrong. I want a make a link that jumps down the page to a header. I believe these are called fragment links. Here is my code thats not working:

<a href="#Frag">My Link</a>

<div id="cont">

<p>Lots of content here, abbreviated in this example to save space</p>

<h2 id="Frag">Header I want to jump to</h2>
</div>

Answer 1

Your code works fine in firefox anyway you can use as well name instead of id..

http://www.w3schools.com/tags/att_a_name.asp

if you want to have a nice scrolling you can use jquery scroll http://api.jquery.com/scroll/

Answer 2

Pretty sure you need to specify the name attribute for an anchor to work, for example:

<a href="#content">Skip to content</a>

<div name="content" id="content"></div>

Okay, so 'pretty sure' was a euphemism for 'guess' and I thought I'd look it up, so, from the HTML 4.01 Specification we get this from section 12.2.3 Anchors with the id attribute:

The id attribute may be used to create an anchor at the start tag of any element (including the A element). This example illustrates the use of the id attribute to position an anchor in an H2 element. The anchor is linked to via the A element.

You may read more about this in <A href="#section2">Section Two</A>.

...later in the document

<H2 id="section2">Section Two</H2>

...later in the document

<P>Please refer to <A href="#section2">Section Two</A> above for more details.`

To carry on the convention of guesswork, perhaps your page isn't long enough to allow jumping to that content (that is, your page might have nowhere to jump and the content to jump to is already visible.)

Other than that, and from the same section of the spec previously linked, here is some general info on when to use what as the anchor identifier (in terms of the link its self) that could be otherwise valuable:

Use id or name? Authors should consider the following issues when deciding whether to use id or name for an anchor name:

• The id attribute can act as more than just an anchor name (e.g., style sheet selector, processing identifier, etc.).
• Some older user agents don't support anchors created with the id attribute.
• The name attribute allows richer anchor names (with entities).