<IFRAME SRC = “reallylongpage.html＃底部”/>不工作

我有以下嵌入的iframe<IFRAME SRC = “reallylongpage.html＃底部”/>不工作

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

reallylongpage.html已2个锚#top返回和#bottom网页

我想我的iframe页面底部加载reallylongpage.html所以我做

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

但是，这里有两个滚动的iframe和父页的不良影响。父页面不应该滚动。这发生在Chrome和Firefox中。

这里是一个拥有全部代码的例子

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>

这是我希望它看起来像

这是我得到的 incorrect http://i33.tinypic.com/2gy0t1x.png

来源

2010-08-05 kenwarner

哇，我从来没有注意到这一点。 Google上的每一个链接似乎都没有提供任何解决方案：-O 肯定会喜欢这一个......希望有人更好地了解并且启发我们两个。 – Pandincus 2010-08-06 21:02:07

这似乎是浏览器中的事实上的行为（至少我找不到任何关于锚点和滚动的书面标准）。

浏览器尽力滚动所有窗口，直到看到所需的片段。（即使当您点击“got to top”链接，并且在您的示例中向div添加“padding-bottom：3000px;”时，您会注意到这一点）。

考虑使用jQuery's scrollTo plugin实际操作滚动适合你的容器的位置。

为了用自己的例子证明：

托管演示：

With jQuery scrollTo

Without jQuery scrollTo

全部来源：

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>

来源

2010-08-07 04:34:59 brianpeiris

那么，它只是一个混乱的浏览器。我做了一个快速的检查，发现你的name="bottom"除此之外什么都没有。由于浏览器需要关注该元素并将其放置在顶部，因此它没有在iframe中找到任何可以将#bottom滚动到顶部的内容，因此它滚动了父级，但仅将#buttom置顶。

我用你的代码在这里设置了一个页面，它是http://jsfiddle.net/VGN2k/来解释我在说什么。检查出来

我所做的是在“#bottom”之后添加一堆<br/>以创建空间，现在浏览器有空间可以使用它将#bottom置顶。

来源

2010-08-07 04:52:32 Starx

<IFRAME SRC = “reallylongpage.html＃底部”/>不工作

回答

托管演示：

全部来源：

parent.html

child.html

相关问题