The basic question is how, using HTML (or PHP if that will make it easier) I can have a link and target on the same page which will move the focus (and cursor) down to a point on the same page.
Say, for hypothetical example, I am designing a webpage about the Elves of Mirkwood in Tolkien, and the author has devoted several long paragraphs to the topic of elves generally and how the Mirkwood Elves fit into the big picture of Elvenkind. For those who already know this and are looking up something specific about the Mirkwood Elves, I want to be able to give them a link that will jump them down the page to where the author begins discussion of the Mirkwood Elves in particular, after the long excursus about Elves generally. What code would I use to make a link that says "To jump there, click here, and what would I use to set the target that clicking on the link would jump to?
Use an anchor link. You can link to any tag with a matching ID attribute in the page.
<a href="#mirkwood-elves">Mirkwood Elves</a>
....
<h1 id="mirkwood-elves">Mirkwood Elves</h1>
<p>The Mirkwood Elves are these things that nerds go on about.</p>
If you want to control the speed that clicking on an anchor links moves down a page, usejQuery with SmoothAnchors. A bit of eye candy but your web users will like it if so inclined.
And if you don’t have something like <p id=“stupid-elves”> you must have <a name=“stupid elves”>. Using both at the same time makes one of them redundant.
Oh, right. I should’ve been more clear. I usually have my elements named anyway for CSS styling purposes. I didn’t realize I could also use them as bookmarks.
Yep – the fact that #foo can link to any id attribute in a document (as opposed to just named anchors) seems to be a bit of an open secret. I’ve met lots of front-end developers who had no idea. (And I used to do tons of redundant named anchors as well.)
I think this feature was added in HTML4, which makes it about 11 years old.
