Links inside an iframe load the new page in a scrolled-down position

[lasvegas]

I pay for an outside service that I want to appear as if it comes from my site, so I load the outside service in an IFrame.

All of the services pages are very long. The problem is that if I scroll down a bit on the services pages and click a link, when the link that was clicked loads instead of loading the page back up at the top of the IFRAME I'm loading the page and having it appear on my screen at the exact same point on the iframe scroll bar as where I clicked.

I really need to use IFrames for a number of reasons, but I need the clicked links to load the page back up at the top of the IFrame, not at the bottom of the page/scrollbar or wherever on the page it was clicked to being with.....

Any ideas? I've seen this issue reported on many other forums by doing a google search. So I know I'm not the only one who has experienced this problem, but no one ever seems to have a solution for it. Any help would be greatly appreciated.

[Birdman]

Welcome to WW, lasvegas!

Just a longshot, but do the links that you click have something like this in them?

/webpage.html#foo

That will cause the page to scroll to a spot (#foo section).

[lasvegas]

Hi Birdman.

No, they are just normal links. The problem really is that whereever you are in the frame when you click the link is the exact spot you are at on the next page that comes up after you click the link. It's the craziest thing. From what I've been reading it almost seems like IFrames aren't that great for really long pages inside the frame that have links on them....

[tedster]

Can you show us the code for your iframe element? Just switch out the actual domain name for the iframed page to say "example.com"

[lasvegas]

I have a fix! And it works great. I hope it's ok to share it with everyone....

This problem stems from the fact the iframe height is taller than the browser page height. In this case the height is set so that the search page with it's large map can fit without displaying iframe scrollbars. So to view all of the iframe contents, the main page also has to be scrolled. Then when the iframe is reloaded on a submit , it only updates the iframe content, the main page and it's scrollbar position is unaffected.

What you can do to help your page out is to use a javascript handler function to scroll back up to the top whenever the iframe is reloaded. It ends up looking a bit strange because the scroll happens after the iframe is reloaded, but it's functional.

Anyway you'll want to do something like the following.

Add to your iframe tag:

Code:
<iframe name="iframe" onload="scrollToTop()" ...etc>

Then in the head section of the page:

Code:

<script language="javascript">
function scrollToTop() {
scroll(0,0);
}
</script>

Hopefully this will help out someone else who has had a few sleepless nights trying to figure out this problem!

[tedster]

Thanks - yes, I can see how that bit of JavaScript is a fix and really appreciate your posting the resolution. But I am still quite mystified that the problem exists at all!