需求场景:
父页面 A 包含有 iframe 页面 B,
页面 B 内容很长, 浏览器一两屏不能显示全.
B 页面相关内容在网页最前端有目录连接 list1, list2, 点击 list1 或者 list2 浏览器向下滚动到 content1 或者 content2 处. 即需要在同页面中使用锚点连接机制
解决思路:
iframe 子页面中的目录连接点击之后将相关高度传给 top 窗口
由 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...
Content1...
来源: http://www.jianshu.com/p/96c33677507e