<iframe src=“reallylongpage.html#bottom” />

I have the following embedded iframe

<iframe width="100%" height="400" src="reallylongpage.html" />

reallylongpage.html has 2 anchors #top and #bottom

I want my iframe to load reallylongpage.html at the bottom of the page so I did

<iframe width="100%" height="400" src="reallylongpage.html#bottom" />

But this has the undesirable effect of scrolling both the iframe AND the parent page. The parent page shouldn't scroll at all. This happens in Chrome and Firefox.

here is an example with full code

parent.html

<html>
 <body>
    <div style="padding:100 200;">
      <iframe WIDTH="100%" HEIGHT="400" SRC="CHILD.HTML#BOTTOM" ></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

<html>
  <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>

this is what i want it to look like correct http://i38.tinypic.com/2gxh1f6.png

this is what i get instead incorrect http://i33.tinypic.com/2gy0t1x.png

标签： jquery html iframe anchor

2条回答

beautiful°

2楼-- · 2019-03-31 01:44

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.

0人赞添加讨论(0) 举报

beautiful°

3楼-- · 2019-03-31 02:02

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"></script>
        <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"></script>
        <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>

0人赞添加讨论(0) 举报