如何将iframe中的div从另一个iframe滚动到锚点

时间:2015-02-15 20:40:45

标签: javascript jquery html iframe anchor

不知道标题是否对你有意义,让我展开:

我有一个基本html文件,其中包含iframe1等内容。 iframe1包含6个链接,这些链接应链接到diviframe2的锚点。加载iframe2代替iframe1target="_self"。现在,诀窍是它应该滚动div,而不是iframe2本身,因为iframe2中的其他内容应该保留在视图中。

很多搜索没有把我带到任何地方,所以我甚至都不知道这是否可行,所以我想我会在这里尝试一下,然后被迫将整个复杂的结构重新修改为其他东西。我是javascript的新手,但我知道函数或变量是什么:)谢谢。

所以,在主html中我有:

<div class="content">    
<iframe class="iframes" src="iframes/i-servlinks.html"></iframe>
</div>

在iframe1(这里称为i-servlinks.html)中我有6个:

<div class="works">
<a class="worklinks" href="i-servs.html" target="_self">Linktoanchor</a>
</div>

在iframe2(这里称为i-serv.html)中,我有:

<div class="servlinks">
<a class="tab-item" href="#link1">1</a>
<a class="tab-item" href="#link2">2</a>
<a class="tab-item" href="#link3">3</a>
<a class="tab-item" href="#link4">4</a>
<a class="tab-item" href="#link5">5</a>
<a class="tab-item" href="#link6">6</a>
</div>
<div class="servs">
<!-- a lot of text, with the 6 anchors spread out in it, and this is the div that should scroll, servlinks div should stay in view on top of iframe2 -->
</div>

2 个答案:

答案 0 :(得分:1)

好吧,我放弃了,在尝试了一千个scrollTo类型的插件和脚本后,它在我的设置中无法正常工作。因此,我将iframe1iframe2的内容移至我的主html,并将iframe1放入div,保留{{1}的内容在主iframe2之外,直到我用6个链接container中的任意一个隐藏它(有两行onclick)。我稍微改造了我的javascripthtml,而且它很有魅力。

功能相同,但实际上更清晰,文件更少,脚本更少。所以这只是为了证明思维更简单通常更好。

答案 1 :(得分:0)

我认为你需要使用一些Javascript来覆盖默认的滚动行为。我创建了一个jsFiddle来说明。

$('a').on('click',function(e){
  e.preventDefault();
  var $this=$(this);
  var id = $this.attr('href');
  var offset = $(id)[0].offsetTop;
  var wrapY=$('.wrap')[0].offsetTop;
  $('.wrap').scrollTop(offset-wrapY);
});