javascript - Force Inner-iframe Content to Scroll To Top On Pageload

All of my website's 'content pages' open inside of an iframe on my index page.

I am using a onload="scroll(0,0);" code in that iframe which successfully forces all of my 'content pages' to start at the 'top'.

  <iframe id="iframe_A" name="iframe_A" onload="scroll(0,0);" src="Page1.html"></iframe>

So far, so good.

However... within my website, I also have a 'subsite' (which also open's inside of iframe_A), yet has it's own iframe [iframe_B].

All of the subsite's content pages open inside of iframe_B.

All good.... but, unfortunately... I haven't been unable to get the content pages for the subsite's iframe_B to open at the top the same way as they do in iframe_A.

To better illustrate the issue I am having, I have included an extremely stripped down model (6 pages, including the 'Index Page') of the site, to represent the layout I am using.

INDEX PAGE:

<!DOCTYPE html>
<html>
<head>
<style>
body{margin:0;}
.header{width:100%; height:60px; background-color:blue;}
.header a{padding-left:20px; vertical-align:middle; line-height:60px; font-family:Arial; font-size:12pt; color:#ffffff;}
#iframe_A{width:100%; height:1700px;}
.footer{width:100%; height:60px; background-color:blue; margin-bottom:20px;}
.footer a{padding-left:20px; vertical-align:middle; line-height:60px; font-family:Arial; font-size:12pt; color:#ffffff;}
</style>
</head>
<body>

<div class="header"><a>Index Header&nbsp;&nbsp;</a>
<a href="Page1.html" target="iframe_A">Page 1</a>&nbsp;&nbsp;
<a href="Page2.html" target="iframe_A">Page 2</a>&nbsp;&nbsp;
<a href="Page3.html" target="iframe_A">Page 3</a>
</div>

<iframe id="iframe_A" name="iframe_A" src="Page1.html" scrolling="no" onload="scroll(0,0);"></iframe>

<div class="footer"><a>Index Footer&nbsp;&nbsp;</a>
<a href="Page1.html" target="iframe_A">Page 1</a>&nbsp;&nbsp;
<a href="Page2.html" target="iframe_A">Page 2</a>&nbsp;&nbsp;
<a href="Page3.html" target="iframe_A">Page 3</a>
</div>

</body>
</html>

PAGE 1

<!DOCTYPE html>
<html>
<head>
<style>
body{margin:0px 0px 0px 20px;}
.font{font-family:Arial, Helvetica, sans-serif; font-size:12pt;}
.top{margin-top:10px;}
.bottom{margin-top:1640px;}
</style>
</head>
<body>
<div class="top font">This is Page 1 in iframe_A (Top).</div>
<div class="bottom font">This is Page 1 in iframe_A (Bottom).</div>
</body>
</html>

PAGE 2

<!DOCTYPE html>
<html>
<head>
<style>
body{margin:0px 0px 0px 20px;}
.font{font-family:Arial, Helvetica, sans-serif; font-size:12pt;}
.top{margin-top:10px;}
.bottom{margin-top:1640px;}
</style>
</head>
<body>
<div class="top font">This is Page 2 in iframe_A (Top).</div>
<div class="bottom font">This is Page 2 in iframe_A (Bottom).</div>
</body>
</html>

PAGE 3

<!DOCTYPE html>
<html>
<head>
<style>
body{margin:0px;}
.header{width:100%; height:60px; background-color:red;}
.header a{padding-left:20px; vertical-align:middle; line-height:60px; font-family:Arial; font-size:12pt; color:#ffffff;}
#iframe_B{width:100%; height:1580px; }
.footer{width:100%; height:60px; background-color:red;}
.footer a{padding-left:20px; vertical-align:middle; line-height:60px; font-family:Arial; font-size:12pt; color:#ffffff;}
</style>
</head>
<body>
<div class="header"><a>Page 3 (Subsite) Header</a>
<a href="Page4.html" target="iframe_B">Page 4</a>
<a href="Page5.html" target="iframe_B">Page 5</a>
</div>
<iframe id="iframe_B" name="iframe_B" src="Page4.html" scrolling="no">
</iframe>
<div class="footer"><a>Page 3 (Subsite) Footer&nbsp;&nbsp;</a>
<a href="Page4.html" target="iframe_B">Page 4</a>
<a href="Page5.html" target="iframe_B">Page 5</a>
</div>
</body>
</html>

PAGE 4

<!DOCTYPE html>
<html>
<head>
<style>
body{margin:0px 0px 0px 20px;}
.font{font-family:Arial, Helvetica, sans-serif; font-size:12pt;}
.top{margin-top:10px;}
.bottom{margin-top:1520px;}
</style>
</head>
<body>
<div class="top font">This is Page 4, in iframe_B (Top).</div>
<div class="bottom font">This is Page 4, in iframe_B (Bottom).</div>
</body>
</html>

PAGE 5

<!DOCTYPE html>
<html>
<head>
<style>
body{margin:0px 0px 0px 20px;}
.font{font-family:Arial, Helvetica, sans-serif; font-size:12pt;}
.top{margin-top:10px;}
.bottom{margin-top:1520px;}
</style>
</head>
<body>
<div class="top font">This is Page 5, in iframe_B (Top).</div>
<div class="bottom font">This is Page 5, in iframe_B (Bottom).</div>
</body>
</html>

In this model... Pages 1, 2 and 3 always open at the top of the page in iframe_A, no matter what page position you were at on the previous page... as they should.

I am attempting to get content pages 4 and 5 (which open in 'iframe_B' on Page 3), to ALSO open at the top each time.

All of my website's 'content pages' open inside of an iframe on my index page.

I am using a onload="scroll(0,0);" code in that iframe which successfully forces all of my 'content pages' to start at the 'top'.

  <iframe id="iframe_A" name="iframe_A" onload="scroll(0,0);" src="Page1.html"></iframe>

So far, so good.

However... within my website, I also have a 'subsite' (which also open's inside of iframe_A), yet has it's own iframe [iframe_B].

All of the subsite's content pages open inside of iframe_B.

All good.... but, unfortunately... I haven't been unable to get the content pages for the subsite's iframe_B to open at the top the same way as they do in iframe_A.

To better illustrate the issue I am having, I have included an extremely stripped down model (6 pages, including the 'Index Page') of the site, to represent the layout I am using.

INDEX PAGE:

<!DOCTYPE html>
<html>
<head>
<style>
body{margin:0;}
.header{width:100%; height:60px; background-color:blue;}
.header a{padding-left:20px; vertical-align:middle; line-height:60px; font-family:Arial; font-size:12pt; color:#ffffff;}
#iframe_A{width:100%; height:1700px;}
.footer{width:100%; height:60px; background-color:blue; margin-bottom:20px;}
.footer a{padding-left:20px; vertical-align:middle; line-height:60px; font-family:Arial; font-size:12pt; color:#ffffff;}
</style>
</head>
<body>

<div class="header"><a>Index Header&nbsp;&nbsp;</a>
<a href="Page1.html" target="iframe_A">Page 1</a>&nbsp;&nbsp;
<a href="Page2.html" target="iframe_A">Page 2</a>&nbsp;&nbsp;
<a href="Page3.html" target="iframe_A">Page 3</a>
</div>

<iframe id="iframe_A" name="iframe_A" src="Page1.html" scrolling="no" onload="scroll(0,0);"></iframe>

<div class="footer"><a>Index Footer&nbsp;&nbsp;</a>
<a href="Page1.html" target="iframe_A">Page 1</a>&nbsp;&nbsp;
<a href="Page2.html" target="iframe_A">Page 2</a>&nbsp;&nbsp;
<a href="Page3.html" target="iframe_A">Page 3</a>
</div>

</body>
</html>

PAGE 1

<!DOCTYPE html>
<html>
<head>
<style>
body{margin:0px 0px 0px 20px;}
.font{font-family:Arial, Helvetica, sans-serif; font-size:12pt;}
.top{margin-top:10px;}
.bottom{margin-top:1640px;}
</style>
</head>
<body>
<div class="top font">This is Page 1 in iframe_A (Top).</div>
<div class="bottom font">This is Page 1 in iframe_A (Bottom).</div>
</body>
</html>

PAGE 2

<!DOCTYPE html>
<html>
<head>
<style>
body{margin:0px 0px 0px 20px;}
.font{font-family:Arial, Helvetica, sans-serif; font-size:12pt;}
.top{margin-top:10px;}
.bottom{margin-top:1640px;}
</style>
</head>
<body>
<div class="top font">This is Page 2 in iframe_A (Top).</div>
<div class="bottom font">This is Page 2 in iframe_A (Bottom).</div>
</body>
</html>

PAGE 3

<!DOCTYPE html>
<html>
<head>
<style>
body{margin:0px;}
.header{width:100%; height:60px; background-color:red;}
.header a{padding-left:20px; vertical-align:middle; line-height:60px; font-family:Arial; font-size:12pt; color:#ffffff;}
#iframe_B{width:100%; height:1580px; }
.footer{width:100%; height:60px; background-color:red;}
.footer a{padding-left:20px; vertical-align:middle; line-height:60px; font-family:Arial; font-size:12pt; color:#ffffff;}
</style>
</head>
<body>
<div class="header"><a>Page 3 (Subsite) Header</a>
<a href="Page4.html" target="iframe_B">Page 4</a>
<a href="Page5.html" target="iframe_B">Page 5</a>
</div>
<iframe id="iframe_B" name="iframe_B" src="Page4.html" scrolling="no">
</iframe>
<div class="footer"><a>Page 3 (Subsite) Footer&nbsp;&nbsp;</a>
<a href="Page4.html" target="iframe_B">Page 4</a>
<a href="Page5.html" target="iframe_B">Page 5</a>
</div>
</body>
</html>

PAGE 4

<!DOCTYPE html>
<html>
<head>
<style>
body{margin:0px 0px 0px 20px;}
.font{font-family:Arial, Helvetica, sans-serif; font-size:12pt;}
.top{margin-top:10px;}
.bottom{margin-top:1520px;}
</style>
</head>
<body>
<div class="top font">This is Page 4, in iframe_B (Top).</div>
<div class="bottom font">This is Page 4, in iframe_B (Bottom).</div>
</body>
</html>

PAGE 5

<!DOCTYPE html>
<html>
<head>
<style>
body{margin:0px 0px 0px 20px;}
.font{font-family:Arial, Helvetica, sans-serif; font-size:12pt;}
.top{margin-top:10px;}
.bottom{margin-top:1520px;}
</style>
</head>
<body>
<div class="top font">This is Page 5, in iframe_B (Top).</div>
<div class="bottom font">This is Page 5, in iframe_B (Bottom).</div>
</body>
</html>

In this model... Pages 1, 2 and 3 always open at the top of the page in iframe_A, no matter what page position you were at on the previous page... as they should.

I am attempting to get content pages 4 and 5 (which open in 'iframe_B' on Page 3), to ALSO open at the top each time.

Share Improve this question edited Jul 4, 2017 at 22:27 asked Jul 4, 2017 at 1:06 Jamie Sexton 1571 gold badge5 silver badges17 bronze badges

So you use an iframe to display another iframe? If so then why not use the same scroll on the other iframe if it seems to function well on the first one? – NewToJS Commented Jul 4, 2017 at 1:21
@JamieSexton your exact question is not clear here. you are attempting to open page 4, 5 at the top meaning? i can see it always loading in frame B with start of the page visible at the top. Also, why do you confuse by putting the same links at bottom in footer of the each parent page, what's the point? – Amit Shah Commented Jul 4, 2017 at 2:05
@JamieSexton so far understood. have you tried using onload=top.scrollTo(0,0) or onload=window.parent.scrollTo(0,0) or window.parent.parent.scrollTo(0,0) anything that works? just now, i can't access your link given. – Amit Shah Commented Jul 4, 2017 at 6:27

Add a ment |

1 Answer 1

Sorted by: Reset to default 3

Try using one of below onload scripts inside your iframe_B html tag:

<iframe id="iframe_B" name="iframe_B" src="Page4.html" scrolling="no" onload="window.top.scrollTo(0,0);">

Out of below, mostly the first 2 should work in your case.

onload="window.top.scrollTo(0,0);" //Refers to the top main window (page)
onload="window.parent.scrollTo(0,0);" //Refers to the immediate parent window (page)
onload="window.parent.parent.scrollTo(0,0);" //Refers to the parent of parent window (page)

I just tried it and both the first 2 onload event are working like a charm.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Force Inner-iframe Content to Scroll To Top On Pageload - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)