SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to link to a specific place on another page?

    How can I link from web page A to a specific place on web page B?

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ChrisjChrisj View Post
    How can I link from web page A to a specific place on web page B?
    On web page B, give the element that you want to jump to an ID, eg <p id="somethingrandom">
    (You can achieve the same effect by adding <a name="somethingrandom"></a>, but that is very old-fashioned and not recommended)

    Then, on web page A, you add that onto the link with a hash, eg <a href="pageb.htm#somethingrandom">

  3. #3
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that help. It worked successfully.

    Then I tried another link, from lower in the page to the top of that same page, using this code (without success):
    Code:
    <a name="top"></a>
    Code:
    <a href="#top">Learn More</a>
    When I select the Learn More, I am directed to the home page.
    Any additional help will be appreciated.

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ChrisjChrisj View Post
    Thanks for that help. It worked successfully.

    Then I tried another link, from lower in the page to the top of that same page, using this code (without success):
    Code:
    <a name="top"></a>
    Code:
    <a href="#top">Learn More</a>
    When I select the Learn More, I am directed to the home page.
    Any additional help will be appreciated.
    From what you've told us, that shouldn't happen. Your code looks exactly right, apart from being 10+ years out of date, so either your code doesn't say exactly what you've written here or there's something funny going on. Double check that you're looking at the right version of the page and clicking on the right link, and if it's still giving unexpected behaviour then post a link to the problem page here and we'll have a look at it.

    Edit: just a thought, you haven't got a <base> element on the page or anything like that, have you?

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,213
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Stevie D View Post
    apart from being 10+ years out of date
    Yes, you should use the same code as you used in the previous scenario. If you just want to link to the top of the page, choose an element at the top of the page and add an ID to it, such as

    Code:
    <header id="top">
    ⋮
    </header>

  6. #6
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Sometimes the top element (or the body) has some fee space under the top of the page.
    In that case, you can set the id="top" on the <html> tag, and you will go just to the border of the viewport, whatever margins or paddings are used.

  7. #7
    SitePoint Member
    Join Date
    Oct 2013
    Location
    Canada
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Should work, got mine set like this. If you can't even click on link, make sure no borders of any blocks are overlapping the link(Had that happen to me, absolute position block element border was larger then the containing content and was invisible to the eye without the border: CSS style added.

    Code:
    <header id=top> .... </header>
    
              <a href = "#top"> Link to top of page </a>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •