This Iframe Problem is Driving me Crazy...

[jeanpaul1979]

Hi, this iframe problem is driving me crazy, but I don't know IF there is a solution to this problem.

Here are the facts...

I am loading a form that has multiple pages inside an iframe.
I don't have control over the page inside the iframe tag, I only control the iframe page itself.
The iframe has a fixed height because I don't want the iframe itself to show a scrollbar, only the browser should show a scrollbar.

Now here's the problem...

When I scroll down a form page and press submit, the next page loads but the scrollbar remains in the "down scrolled" position.
This results is that the user is already halfway down the form when arriving on the next page.

I created an example here that illustrates the problem: http://allmarketing.com/iframe/iframe.html

The solution I'm looking for is...

I want the browser scrollbar to jump to the top everytime a new page is loaded in the iframe (I can't use a frameset because I need to be able to float graphics on top of the form page).

If you can come up with a workable solution for this I'd be very grateful. I need to get this done fast, and hope it's possible.

If you have any questions feel free to ask.

[Jake Arkinstall]

Have you tried appending #top to the URL?

[jeanpaul1979]

Just tried that, it doesn't work. I think this problem might be easier solved with Javascript. If a mod reads this, can you please move it to the JS forum?

[SoulScratch]

Did the scrollTo(0,0) method not work, with the function I supplied to dynamically generate an iframe?

[Erik J]

Maybe just add the target attribute in the link to the next page ?

 target="_top"

Edit:

But the appending #top (href="next.html#top") arkinstall suggested would be preferred and should work the same.

[jeanpaul1979]

The probem is that I have no control over the content inside the page that is loaded by the iframe, and #top might be working for the first page, but when I click inside the first page loaded inside the iframe click to load the second page in the iframe it doesn't work.

[SoulScratch]

<iframe target="_top" src="page1.html" width="800" height="10000" scrolling="auto" frameborder="0" style="z-index:100;"></iframe>

<script>
(function() {
    var frame = document.getElementsByTagName('iframe')[0];
    frame.onload = function() { window.parent.scrollTo(0,0); }
})();
</script>

[jeanpaul1979]

Thanks SoulScratch! that does the trick.

[SoulScratch]

The amended code to account for IE and it not liking invalid markup or invalid script code in an iframe:

onload = function() { 
    var frame = document.getElementsByTagName('iframe')[0];
    frame.onload = function() {
	window.scrollTo(0,0); 
    }
    var msie = /*@cc_on!@*/false;
    if ( msie ) {
	frame.onreadystatechange = function() {
	    if ( frame.readyState == 'complete' ) {
		window.scrollTo(0,0);
	    }
	}
    }
}