SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Addict crabby80's Avatar
    Join Date
    May 2007
    Posts
    387
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is there a way you stop an anchor link going directly to the top of a page

    Hi guys

    Is there a way you stop an anchor link going directly to the top of a page, for example if I want to link to an article, can it jump to a postion 400px from the top of the page instead??

    Cheers

    Crabby

  2. #2
    SitePoint Zealot get_dave's Avatar
    Join Date
    Nov 2006
    Location
    England, UK
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, I think you want an inline anchor. So do this

    HTML Code:
    <a name="foo">Foo Header</a>
    
    
    <a href="http://www.foobarhome.com#foo">Go to Paragraphy "Foo"</a>

    Otherwise you can use ID's in the same way.
    HTML Code:
    <h4 id="para-8">Paragraph 9</h4>
    
    
    <a href="http://www.foobar.com#para-8">Go to paragraph 8</a>
    I'm looking for a link exchange.
    contact me or head to:
    http://www.aheadcreative.co.uk

  3. #3
    SitePoint Zealot get_dave's Avatar
    Join Date
    Nov 2006
    Location
    England, UK
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry I should have explain that you need to put the anchor or id at the place you want to jump to.

    Then if you want to link to a point on another page you add the "#foo" bit onto the url of that page. If you want to link within the same page you just need to put the "#foo" bit in the href (you won't need the url).

    Any probs PM me....
    I'm looking for a link exchange.
    contact me or head to:
    http://www.aheadcreative.co.uk

  4. #4
    SitePoint Addict crabby80's Avatar
    Join Date
    May 2007
    Posts
    387
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi get_dave

    Thank you for your reply, I'm already using the anchor in this way, but my problem is that it automatically positions that element to the top of the page, is there a way I can control this?

    Basically I have a fixed div tag at the top of the page and the article I'm jumping to is going under this div tag so I can't see it

    Thanks again

  5. #5
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    In the examplebelow, you'd just link to #article.
    Code html4strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
      <head>
        <title></title>
      </head>
      <body>
        <div id="header"></div> <!-- your 400 (or whatever) pixel high div -->
        <div id="article"></div> <!-- a div containing your article -->
      </body>
    </html>
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  6. #6
    SitePoint Addict crabby80's Avatar
    Join Date
    May 2007
    Posts
    387
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    Thanks for your replies. In my example the "header" div has a style "position:fixed", so all content scrolls underneith (clients choice), so when I link to the article its going underneith the header div, how can I stop this?

    Cheers

    Crabby

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Put the identifier on an element that is X pixels above the start of the article, where X is the height of the fixed header.

    Code HTML4Strict:
    <div id="article"></div>
    <h1>Article Heading</h1>
    ...
    Code CSS:
    #article {
      height:50px; /* or whatever your header is */
    }
    Birnam wood is come to Dunsinane

  8. #8
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,871
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You should put a top margin on the first element in the scrollable part of the page that is the same height as the fixed header so that the content doesn't disappear under the header until the page is scrolled. No anchor is required.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  9. #9
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Um, is the IE Haslayout bug for in-page links also still in effect? I remember IE would always bring the focus to the top of the page if the link itself didn't have Layout.

  10. #10
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there a solution to this problem, or should one use javascript?

    Doesn't seems like rocket science?

    I'm having the same issue, but after hours googling, nothing.

  11. #11
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,871
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ebenlouw View Post
    Is there a solution to this problem,
    There are several solutions already mentioned in this thread any of which will work.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  12. #12
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Is there a solution to this problem, or should one use javascript?
    Well, the advantage Javascript would have is, you wouldn't have a bunch of spaces above each link destination (using Tommy's solution). Felgall's solution will work for links going to the very top of the page, but any links in the middle of the page, if you have a position: fixed header at the top, the user will have to scroll a little to get the top of the target to show.

    So still use an HTML anchor, and you could add some Javascript sugar to make it a little nicer for your visitors with Javascript. Do NOT use a JS-only solution.

  13. #13
    SitePoint Member
    Join Date
    Oct 2009
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have outlined my solution to this problem in a post titled CSS fixed-position headers. SitePoint won't allow me to post a link, but a Google search for that exact phrase should find it (once the page has been indexed). If you know of a more elegant solution, please let me know!


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
  •