zoukankan      html  css  js  c++  java
  • 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…

  • 相关阅读:
    gtest(C++单元测试框架)
    tinyXML入门
    笔记 解决vue3动态绑定本地图片失效问题
    面试技巧
    vuex 状态管理
    插槽的使用
    Vue-router 路由
    Vue组件
    (转)JS 常用 DOM
    9-26
  • 原文地址:https://www.cnblogs.com/zhanghairong/p/2585240.html
Copyright © 2011-2022 走看看