<iframe src="reallylongpage.html#bottom" /> doesn't work
Question by qntmfred
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
this is what i get instead
Answer by brianpeiris
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:
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>
Answer by Starx
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.
