# HTML Coding; Skipping Forward on Same Page

**URL:** <https://boards.straightdope.com/t/html-coding-skipping-forward-on-same-page/558338>\
**Category:** Factual Questions\
**Created:** [October 25, 2010, 9:26pm UTC](https://boards.straightdope.com/t/html-coding-skipping-forward-on-same-page/558338 "2010-10-25T21:26:45Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Polycarp](https://avatars.discourse-cdn.com/v4/letter/p/82dd89/32.png) [@Polycarp](https://boards.straightdope.com/u/Polycarp)\
**Post date:** [October 25, 2010, 9:26pm UTC](https://boards.straightdope.com/t/html-coding-skipping-forward-on-same-page/558338/1 "2010-10-25T21:26:45Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![friedo](https://avatars.discourse-cdn.com/v4/letter/f/8edcca/32.png) [@friedo](https://boards.straightdope.com/u/friedo)\
**Post date:** [October 25, 2010, 9:32pm UTC](https://boards.straightdope.com/t/html-coding-skipping-forward-on-same-page/558338/2 "2010-10-25T21:32:55Z")

</div>

Use an anchor link. You can link to any tag with a matching ID attribute in the page.

```auto

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

```

---

<div class="post-metadata">

**Author:** ![Polycarp](https://avatars.discourse-cdn.com/v4/letter/p/82dd89/32.png) [@Polycarp](https://boards.straightdope.com/u/Polycarp)\
**Post date:** [October 25, 2010, 9:44pm UTC](https://boards.straightdope.com/t/html-coding-skipping-forward-on-same-page/558338/3 "2010-10-25T21:44:43Z")

</div>

Perfect! Thanks!

---

<div class="post-metadata">

**Author:** ![Duckster](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/duckster/32/1244_2.png) [@Duckster](https://boards.straightdope.com/u/Duckster)\
**Post date:** [October 26, 2010, 12:16am UTC](https://boards.straightdope.com/t/html-coding-skipping-forward-on-same-page/558338/4 "2010-10-26T00:16:00Z")

</div>

If you want to control the speed that clicking on an anchor links moves down a page, use[jQuery](http://jquery.com/) with [SmoothAnchors](http://www.ooeygui.net/articles/399). A bit of eye candy but your web users will like it if so inclined.

---

<div class="post-metadata">

**Author:** ![Reply](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/reply/32/15952_2.png) [@Reply](https://boards.straightdope.com/u/Reply)\
**Post date:** [October 26, 2010, 6:56am UTC](https://boards.straightdope.com/t/html-coding-skipping-forward-on-same-page/558338/5 "2010-10-26T06:56:48Z")

</div>

> [@friedo](#):
>
> Use an anchor link. You can link to any tag with a matching ID attribute in the page.
> 
> ```auto
> 
> <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>
> 
> ```

Whoa. And all this time I’d been using redundant \<a name=“blah”\> for bookmarks… **thank you**!

---

<div class="post-metadata">

**Author:** ![Floater](https://avatars.discourse-cdn.com/v4/letter/f/dc4da7/32.png) [@Floater](https://boards.straightdope.com/u/Floater)\
**Post date:** [October 26, 2010, 7:10am UTC](https://boards.straightdope.com/t/html-coding-skipping-forward-on-same-page/558338/6 "2010-10-26T07:10:54Z")

</div>

> [@Reply](#):
>
> Whoa. And all this time I’d been using redundant \<a name=“blah”\> for bookmarks… **thank you**!

I wouldn’t call it redundant, you have to have something there. Anyway, this was very neat. Thank you very much.

---

<div class="post-metadata">

**Author:** ![Reply](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/reply/32/15952_2.png) [@Reply](https://boards.straightdope.com/u/Reply)\
**Post date:** [October 26, 2010, 7:19am UTC](https://boards.straightdope.com/t/html-coding-skipping-forward-on-same-page/558338/7 "2010-10-26T07:19:28Z")

</div>

> [@Floater](#):
>
> I wouldn’t call it redundant, you have to have something there. Anyway, this was very neat. Thank you very much.

What do you mean?

If I had a paragraph like \<p id=“stupid-elves”\> that I could link to directly, there’d be no need for a separate \<a name=“stupid-elves”\>

---

<div class="post-metadata">

**Author:** ![Floater](https://avatars.discourse-cdn.com/v4/letter/f/dc4da7/32.png) [@Floater](https://boards.straightdope.com/u/Floater)\
**Post date:** [October 26, 2010, 7:30am UTC](https://boards.straightdope.com/t/html-coding-skipping-forward-on-same-page/558338/8 "2010-10-26T07:30:51Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Reply](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/reply/32/15952_2.png) [@Reply](https://boards.straightdope.com/u/Reply)\
**Post date:** [October 26, 2010, 7:45am UTC](https://boards.straightdope.com/t/html-coding-skipping-forward-on-same-page/558338/9 "2010-10-26T07:45:54Z")

</div>

> [@Floater](#):
>
> 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.

---

<div class="post-metadata">

**Author:** ![friedo](https://avatars.discourse-cdn.com/v4/letter/f/8edcca/32.png) [@friedo](https://boards.straightdope.com/u/friedo)\
**Post date:** [October 26, 2010, 12:37pm UTC](https://boards.straightdope.com/t/html-coding-skipping-forward-on-same-page/558338/10 "2010-10-26T12:37:20Z")

</div>

> [@Floater](#):
>
> 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.

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

---

<div class="post-metadata">

**Author:** ![GuanoLad](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/guanolad/32/42_2.png) [@GuanoLad](https://boards.straightdope.com/u/GuanoLad)\
**Post date:** [October 26, 2010, 1:12pm UTC](https://boards.straightdope.com/t/html-coding-skipping-forward-on-same-page/558338/11 "2010-10-26T13:12:40Z")

</div>

I’ve never seen that trick in any HTML book or tips page. It’s always only ever been the \<a name=""\> attribute. You learn something new every day.
