4

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.

James213
  • 957
  • 5
  • 31
  • 57
  • If you downvote an answer, explain why, otherwise it is a detriment to the stack community. – RSM Aug 18 '11 at 16:06
  • I don't know if this is directed towards me or in general, but if i did downvote a question it was very so unintentional, especially since i've found all of the questions to be helpful and useful. Also...i don't believe i even have the permissions to downvote... – James213 Aug 18 '11 at 16:11
  • no its not directed towards you, sorry for the confusion. it was just in general because I saw a couple of downvotes with no explanations. – RSM Aug 18 '11 at 16:13

6 Answers6

11

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.

RSM
  • 14,540
  • 34
  • 97
  • 144
  • You may prefer `id="anchor"` over `name="anchor"`, see http://stackoverflow.com/questions/484719/html-anchors-with-name-or-id – feeela Aug 18 '11 at 16:06
  • This is also true. Nice addition – RSM Aug 18 '11 at 16:06
  • How can you do this with links to other pages? The links from the other pages are in a `ul` but need to show up as they would with anchor tags. they are currently in a `SELECT CASE` statement, but it shows up on the .htm page. I didn't make the page, just want to fix it. :/ – Jamie Aug 03 '12 at 14:29
7

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

Community
  • 1
  • 1
George Cummins
  • 28,485
  • 8
  • 71
  • 90
  • I think it's important to note that that value of the hash should ideally be an ID that exists on your page. I'm upvoting this answer to indicate that this is the right solution, not adding a new anchor with a name attribute. The other way does work, but it's a bit archaic. – Jamie Dixon Aug 18 '11 at 16:00
4

You can do this with anchor tags.

In the menu:

<a href="#item-one">item one</a>
<a href="#item-two">item two</a>

Further down the page:

<a name="item-one">item one</a>

...

<a name="item-two">item two</a>

You can check out http://www.w3schools.com/HTML/html_links.asp for more information.

Doug Kress
  • 3,537
  • 1
  • 13
  • 19
2

If you want a smoother scroll than that of an anchor you can also use a jquery plugin/script. For example https://github.com/kswedberg/jquery-smooth-scroll

cyph3r
  • 373
  • 5
  • 13
1

If you're asking what I think you're asking, you just use anchor tags lower down the page as described in this article here

Xav
  • 348
  • 1
  • 9
0

I (assume) you know about anchor tags & bookmarks...?

Other than that, here's a script that will position your page to the bookmark on postbacks. http://geekswithblogs.net/jawad/archive/2005/05/25/BookMarkJump.aspx

Chains
  • 12,541
  • 8
  • 45
  • 62