asp.net IFrame scroll bar push to top . . .

Question

Heres a tricky one . .

I have a webpage (called PageA) that has a header and then simply includes an iframe. Lets call the page within the iframe PageB. PageB simply has a bunch of thumbnails but there are a lot so you have to scroll down on PageA to view them all.

When i scroll down to the bottom of the pageB and click on a thumbnail it looks like it takes me to a blank page. What actually happens is that it bring up the image but since the page that is just the image is much shorter in height, the scroll bar stays at the same location and doesn't adjust for it. I have to scroll up to the top of the page to view the picture.

Is there anyway when i click a link on a page that is within an iframe, the outer pages scroll bar goes back up to the top

thks, ak

Answer 1

Javascript is your best bet. You can use the scroll() method to scroll back up to the top of your IFRAME. Add a javascript handler in the body load so that each time you click a thumbnail, call a function that calls scroll() to scroll up.

Answer 2

@mek after trying various methods, the best solution I've found is this:

In the outer page, define a scroller function:

<script type="text/javascript">
  function gotop() {
    scroll(0,0);
  } 
</script>

Then when you define the iframe, set an onload handler (which fires each time the iframe source loads i.e. whenever you navigate to a new page in the iframe)

<iframe id="myframe" 
    onload="try { gotop() } catch (e) {}" 
    src="http://yourframesource"
    width="100%" height="999"
    scrolling="auto" marginwidth="0" marginheight="0" 
    frameborder="0" vspace="0" hspace="0" >
</iframe>

The nice thing about this approach is it means you do not need to make any changes to the pages included in the iframe (and the iframe contents can happily be in another domain - no cross-site scripting issues).

Answer 3

I've spent a considerable amount of time trying to figure out how to scroll to the top of the iframe from within the PHP code I was calling (from within the parent ASP.NET page). I never figured I could scroll to the top using the same javascript but in the iframe's onload event. Thanks!

Answer 4

Wow! Thanks so much for this post.

Adding your JavaScript and the onload statement to my iframe worked perfectly in both FF and IE.

This is a real gem of fix, that took me 2 days of googling to find. Must have tried a dozen other non-working codes.

:-)

-Wayne

Answer 5

Great solution, thanks.

Do you also have a recommended way to auto-size the height of an iframe - still not having control of the content within the iframe?

Thanks!

Henrik