Mittwoch, 23. Juli 2008

iFrame Scroll to Anchor Problem

Hi,

I, as many others, discovered the iFrame Scroll to Anchor Problem. What's that?
Usually, when you write a long text, which is structured somehow, like headlines and so, and you have a index at the top of the page with which you can go directly to the headline you want by simply clicking at an index item you solve it with an Anchor.

<a href="headline42">Headline 42</a>
... [somewhere down the page]...
<h1 id="headline42">Headline 42</h1>


This works fine, but, when you load your page with that long text in an iframe with some margin to the top, all this changes a bit.
In IE the outer page jumps to the top of the window when you click on a headline, instead of the text inside just scrolling in the iFrame. FF and others do exactly what we want, but this ******* IE does it wrong, and unfortunately it is IE which 90% users use for browsing the web.

Well, here my solution until now, inspirated by this blog and some others linked in this blog.

I wrote this small function:

function anchorJump () {
setTimeout(function() {window.top.scrollTo(0,0)}, 0);
}

And the A-Tags calling the Anchors looks like that

<a href="#headline42" onclick="anchorJump();">Headline 42</a>


It works, but it flickers, as for an instant you see the scrolled page which is scrolled back not instantly enough. I don't like it, but for now it's the best I found to solve this.

If someone has a better solution, I would like to see it

greez

Keine Kommentare:

Kommentar veröffentlichen