Linking to different areas on a page

Question

This may seem like a stupid question, but:

So what i would like to do is set up a menu section so that when the user clicked on the title of the section it would send them to that particular spot on the page with out having to scoll down. I am not entirely sure how this would work or how complicated it is to achieve.

So bacially i would have

Menu

1. item one (be a link)

2. item two (be a link)

3. etc (be a link)

then further down the page

item one (when item one in menu is clicked page comes to here)

"details about it here"

item two (when item two in menu is clicked page comes to here)

"details here"

How exactly would i go about doing this?

Any help or suggestions are greatly appreciated. Thanks.

Answer 1

Its called an anchor tag and you can combine this with a # to get the desired results asked in the question.

Just put:

<a name="section1"></a>

at the beginning of section1

The next step is to then wherever you want to link to it, just add:

<a href="#section1">here</a>

Please note that you can also point to an ID within an element using the method above to achieve the results.

For example:

<div id="section1"></div>

This will help you, if you have any other questions regarding this let me know.

Answer 2

You can use a hash ('#') in front of a link to specify that it points to an ID or anchor within the same page.

Example:

<a href="#item1">Item 1</a>

will redirect to the following element on the same page:

<div id="item1">Item one details</div>

It will also point to the following anchor, but it is usually preferable to point to an element with an ID to avoid unnecessary markup:

<a name="item1">Item one details</a>

EDIT For the reasons described in HTML Anchors with 'name' or 'id'?, anchors should not be used in this manner in HTML5 because the name attribute no longer exists (according to the current specification draft).