ansaurus

Question

Answer 1

+2 A:

This appears to be the de facto behavior in browsers (At least I couldn't find any written standard about anchors and scrolling).

The browser tries its best to scroll all windows until the desired fragment is visible. (You'll notice this even when you click on the "got to top" link and also if you add "padding-bottom: 3000px;" to the div in your example.)

Consider using jQuery's scrollTo plugin which actually manipulates scroll position of the appropriate container for you.

To demonstrate with your own example:

Hosted Demos:

With jQuery scrollTo

Without jQuery scrollTo

Full Source:

parent.html

<!doctype html>
<html>
    <head>
        <title>parent</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"&gt;&lt;/script&gt;
        <script type="text/javascript" src="jquery.scrollTo-min.js"></script>
        <script type="text/javascript">
            $(function(){
                var iframe = $('iframe');
                iframe.load(function(){
                    iframe.scrollTo('a[name=bottom]');
                });
            });
        </script>
    </head>
    <body>
        <div style="padding:100px 200px 3000px;">
            <iframe width="100%" height="400" src="child.html"></iframe>
        </div>
        <div>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br></div>
    </body>
</html>

child.html

<!doctype html>
<html>
    <head>
        <title>child</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"&gt;&lt;/script&gt;
        <script type="text/javascript" src="jquery.scrollTo-min.js"></script>
        <script type="text/javascript">
            $(function(){
                $('a').click(function(){
                    $(window).scrollTo('a[name=' + this.hash.substring(1) + ']');
                    return false;
                });
            });
        </script>
    </head>
    <body>
        <a name="top" href="#bottom">go to bottom</a><br>
        1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br>
        <a name="bottom" href="#top">go to top</a>
 </body>
</html>

brianpeiris 2010-08-07 04:34:59

Answer 2

A:

Well, its just a confused browser. I did a quick look, and found out that the your name="bottom" has nothing beyond it. As the browser needs to focus on that element and place it window on its top, it didn't find anything inside the iframe which can scroll the #bottom to the top, so it scrolled the parent, but only to bring the #buttom to top.

I have set a page with your code here it is http://jsfiddle.net/VGN2k/ to explain what I am saying. Check it out

What I have done is added bunch of <br/> after the "#bottom" in order to create space, now browser has space which it can use to bring #bottom on the top.

Starx 2010-08-07 04:52:32

ansaurus

tags:

views:

answers:

<iframe src="reallylongpage.html#bottom" /> doesn't work

Hosted Demos:

Full Source:

parent.html

child.html

related questions