Linking to specific headers on other pages

Question

Here's the way I've set-up my site. I have a page called "news.html". The content of this page is just an iframe with a fixed size. The iframe links to "innernews.html", which is the actual content I'm trying to display. I have it set-up this way to keep every page consistently sized. The iframe prevents the height of the page from expanding due to extra content, and is scrollable.

How would I create a link targeting a specific element/header within my "innernews.html" page? If there isn't a way to achieve this, I'll remove the iframe and just plug content straight into "news.html". But still I wouldn't know how to create a link that targets a specific element/header...

Answer 1

You can link to an element (on another page or on the same page) only if the element has the id attribute or it is an a element with the name attribute. In both cases, put the fragment identifier #foo at the end of the URL in the link, where foo is the value of the attribute.

If the page being linked to does not contain such an attribute, and if it is outside your control, you are out of luck

Answer 2

Basically, you can simply create a link to specific header of a page:

<a name="your_header_name"></a>
<h1>Header Text</h1>

...

<a href="#your_header_name">Link to the header</a>

I strongly recommend you to remove iframes from the page if there is no reason to keep them. Iframes can complicate your life when you're trying to do something not trivial.

Answer 3

Have you considered using a container such as:

#newsContainer {
    overflow: scroll;
    height: /*whatever*/
}