iframe 超长页面内的锚点

需求场景：

1. 父页面A 包含有iframe页面B，
2. 页面B内容很长，浏览器一两屏不能显示全。
3. B页面相关内容在网页最前端有目录连接list1， list2， 点击list1或者list2浏览器向下滚动到content1或者content2处。即需要在同页面中使用锚点连接机制

 

 

解决思路：

1. iframe子页面中的目录连接点击之后将相关高度传给top窗口
2. 由top窗口更改document的scrollTop属性，实现页面滚动到响应位置

 

 

实现：

iframe 页面内的相关代码如下：

setWindowScrollTop 中高度加100是父页面与iframe B页面顶部的间距

<ul>

 <li><a href="javascript: setWindowScrollTop (top,document.getElementById('id_content1').offsetTop+ 100);"><strong>1</strong> list1</a></li>

 <li><a href="javascript: setWindowScrollTop (top,document.getElementById('id_content2').offsetTop+ 100);"><strong>2</strong> list2</a></li>

</ul>

…….

<div id="id_content1">1  content1</div>

<div id="id_content2">2  content2</div>

 

 

 

相关js代码：

function setWindowScrollTop(win, topHeight)

{

    if(win.document.documentElement)

    {

        win.document.documentElement.scrollTop = topHeight;

    }

    if(win.document.body){

        win.document.body.scrollTop = topHeight;

    }

}

 

 

附：普通页面的锚点问题:

该问题网上已经有很多讨论了，总的来说锚点的实现基于浏览器对url中#name 的支持。且与标签<a>有紧密关系

 

<a href="#Content1">list1</a>

<a href="#Content2">list2</a>

…

<a name=" Content1" id=" Content1"></a>

Content1…

<a name=" Content1" id=" Content1"></a>

Content1…