Linking to different areas on a page

 

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

  • item one (be a link)

  • item two (be a link)

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

    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.

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

    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.

    链接地址: http://www.djcxy.com/p/88986.html

    上一篇: 如何在动态网址中使用HTML＃锚点

    下一篇: 链接到页面上的不同区域