[英]Load All Of My Pages At Top
I have a website where ALL of my content pages open inside of an iframe. 我有一个网站,所有内容页面都在iframe中打开。
One of the issue I am having, is when a visitor opens a 2nd page on my site, it opens at the same 'scroll position' as the previous page they were on. 我遇到的问题之一是,当访问者在我的网站上打开第二页时,它以与他们上一页相同的“滚动位置”打开。
I would like all of my pages to open at the top. 我希望所有页面都在顶部打开。
NOTE: I have spent days and hours searching on this site and other sites trying to find something that works. 注意:我花了数天和数小时在此站点和其他站点上进行搜索,试图找到可行的方法。 None of the solutions I have found have worked so far.
到目前为止,我发现的所有解决方案都没有奏效。
So... I decided to post my question and a very stripped down example of 3 pages to see if I can get some much needed help with this. 所以...我决定发布我的问题和一个精简的示例(共3页),以查看是否可以得到一些急需的帮助。
Any help or advice is appreciate. 任何帮助或建议,不胜感激。
Here is the 'index' (parent) page: 这是“索引”(父级)页面:
<!DOCTYPE html>
<html>
<head>
<style>
body{margin:0;}
.header{width:100%; height:60px; background-color:blue;}
.header a{vertical-align:middle; line-height:60px; font-family:Arial; font-size:12pt; color:#ffffff;}
#myiframe{width:100%; height:2000px;}
.footer{width:100%; height:60px; background-color:blue; margin-bottom:20px;}
.footer a{vertical-align:middle; line-height:60px; font-family:Arial; font-size:12pt; color:#ffffff;}
</style>
</head>
<body>
<div class="header"><a>This is the Header of the index (parent) page.</a></div>
<iframe id="myiframe" name="myiframe" src="1stPage.html"></iframe>
<div class="footer"><a>Footer</a></div>
</body>
</html>
Here is the 1st 'content' page (including the last failed scroll code): 这是第一个“内容”页面(包括最后一个失败的滚动代码):
<!DOCTYPE html>
<html>
<head>
<style>
body{margin:0;}
.text{font-family:Arial; font-size:12pt;}
.link{margin-top:1900px;}
</style>
<script>
$(document).ready(function(){
$('html, body').scrollTop(0);
$(window).on('load', function() {
setTimeout(function(){ $('html, body').scrollTop(0);}, 0);
});
});
</script>
</head>
<body>
<div class="text">This is the 1st page in iframe (..and this is 'page postition' "Top" or "0").</div>
<div class="text">Please scroll down to the link to 2nd page.</div>
<div class="link"><a class="text" href="2ndPage.html" target="myiframe">Click here to go to 2nd Page</a></div><br>
<div class="text">This is the 1st page in iframe (..and this is 'page postition' "Bottom" or "X").</div>
</body>
</html>
And finally... the 2nd 'content' page (also including the last failed scroll code): 最后...第二个“内容”页面(还包括最后一个失败的滚动代码):
<!DOCTYPE html>
<html>
<head>
<style>
body{margin:0;}
.text{font-family:Arial; font-size:12pt;}
.link{margin-top:1900px;}
</style>
<script>
$(document).ready(function(){
$('html, body').scrollTop(0);
$(window).on('load', function() {
setTimeout(function(){ $('html, body').scrollTop(0);}, 0);
});
});
</script>
</head>
<body>
<div class="text">This is the 2nd page in iframe (..and this is 'page postition' "Top" or "0").</div>
<div class="text">Please scroll down to the link to 2nd page.</div>
<div class="link"><a class="text" href="1stPage.html" target="myiframe">Click here to go back to the 1st Page</a></div><br>
<div class="text">This is the 2nd page in iframe (..and this is 'page postition' "Bottom" or "X").</div>
</body>
</html>
您可以在iFrame onload事件中执行此操作,如下所示:
<iframe id="myiframe" name="myiframe" src="1stPage.html" onload="scroll(0,0);"></iframe>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.