• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1956
  • Last Modified:

Move scrollbar to top of Page A from inside iframe B

Hi guys, I have  a sticky html problem that I need help with :

I have a page and inside that page is an iframe.  The iframes 'height' attribute is set quite large, as scrollbars are turned off and sometimes the page that is displayed inside the iframe is quite large. I need to find a way to move the main pages scrollbar to the top of the page, from inside the iframe.  Forms are getting submitted from the pages inside the iframe, and the main page stays static.  The problem is that because the user will scroll down the main page to look at the contents of the iframe, then press submit button at the bottom of the page and submit the form.  Then, because the next page has appeared, and it isnt as long as the last, all they see is blank filler space.  I need the iframe to be able to reset the scrollbar on the main page to the top of the page.

A workaround might be to just enable the scrollbars on the iframe and make it smaller, but its not as good a solution as I wanted, as it destroys the illusion of the page being one large static page.
2 Solutions
b0lsc0ttIT ManagerCommented:
Are the pages on the same domain and server?

The simplest method, especially for cross browser use, is to put a named anchor in the main page.  When the form submits you can use a line like the one below to go have that page go to the anchor (basically scroll to the top since that is where the anchor is).

The main page would have an anchor like ...

<a name="topofPage"></a>

... and the script in the iframe, part of the submit process, would be ...

top.location.hash = 'topofPage';

Let me know how that works or if you have a question.

"move the main pages scrollbar to the top of the page, from inside the iframe"

can't do it, sorry, I wrestled with the same problem on exactly the same type of changing pages sizes.

"I need the iframe to be able to reset the scrollbar on the main page to the top of the page."

Can't do that either, sorry.  This is the ONLY problem with Iframes, which I have used extensively, and have the same issues.  Unless you can limit the size of the content, you cannot avoid the vertical scroll bars.  Part of the issue is that unless you specify a REAL pixel height for the iframe, it doesn't work correctly.

If you could specify 100% height of the Iframe it would solve your problem, but they don't work that way.  I have never been able to solve these same issues, so as far as I know, there is no solution but to live with scroll bars if you have large content going into an Iframe.

What I did on one site was to keep the small content in the iframe, and if there was large content, write it to a separate browser window, so that the user's location on the main page is not "thrown off".
Forced accept.

EE Admin

Featured Post

2018 Annual Membership Survey

Here at Experts Exchange, we strive to give members the best experience. Help us improve the site by taking this survey today! (Bonus: Be entered to win a great tech prize for participating!)

Tackle projects and never again get stuck behind a technical roadblock.
Join Now