我有以下嵌入式 iframe
<iframe width="100%" height="400" src="reallylongpage.html" />
reallylongpage.html 有 2 个 anchor #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>
这就是我想要的样子
这就是我得到的
最佳答案
这似乎是浏览器中的实际行为(至少我找不到任何关于 anchor 和滚动的书面标准)。
浏览器会尽力滚动所有窗口，直到所需的片段可见。 (即使您单击“到达顶部”链接，并且如果您将“padding-bottom: 3000px;”添加到示例中的 div，您也会注意到这一点。)
考虑使用 jQuery's scrollTo plugin它实际上为您操纵适当容器的滚动位置。
用你自己的例子来演示:
托管演示:
完整来源:
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>
关于jquery - <iframe src ="reallylongpage.html#bottom"/> 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3419072/