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

HTML & CSS
1

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

Yes, I think you want an inline anchor. So do this

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


<h4 id="para-8">Paragraph 9</h4>


<a href="http://www.foobar.com#para-8">Go to paragraph 8</a>
3

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…

4

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

In the examplebelow, you’d just link to #article.

<!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>
6

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

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.

<div id="article"></div>
<h1>Article Heading</h1>
...

#article {
  height:50px; /* or whatever your header is */
}
8

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.

9

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

Is there a solution to this problem, or should one use javascript?:confused:

Doesn’t seems like rocket:( science?

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

11

There are several solutions already mentioned in this thread any of which will work.

12

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

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!