zoukankan      html  css  js  c++  java
  • 导航移动到指定位置

    1,导航栏的html代码

    <div class="collapse navbar-collapse" id="navbar-collapse">
            <ul class="nav navbar-nav-new" id="navbar-nav">
                <li onclick="moveToLocation('baseInfo')" class=""><a>基本信息</a></li>
                <li onclick="moveToLocation('trailDiv')" class=""><a>轨迹信息</a></li>
                <li onclick="moveToLocation('headCon')" class=""><a>回顶部</a></li>
            </ul>
        </div>

    2,信息列表的html代码

    <!--顶部-->
    <div id="headCon" style=" 100%!important">
            <h1 style="margin-bottom: 6px!important;"><span></span></h1>
        </div>
    
    
    <!--基本信息-->
    <h3 class="ttlH3" id="baseInfo">基本信息</h3>
    
    
    <!--轨迹信息-->
    <h3 class="ttlH3 posT" id="trailDiv">轨迹信息 <span class="txtSmall" id="trailTotal">(各类轨迹总数条)</span></h3>

    3,导航栏的点击事件

    //导航移动到指定位置
    function moveToLocation(locationId) {
        var rect = document.getElementById(locationId).getBoundingClientRect();
        //获取元素相对窗口的top值,此处应加上窗口本身的偏移
        var top = window.pageYOffset + rect.top;
        window.scrollTo(0, top);
    }
  • 相关阅读:
    js字符串函数
    js流程语句
    js数组
    js变量
    js运算符
    Time.deltaTime和Time.realtimeSinceStartup
    Prefabs实例化 ResourceMgr
    SLua
    判断物体是否在摄像机内
    [Unity3D]引擎崩溃、异常、警告、BUG与提示总结及解决方法
  • 原文地址:https://www.cnblogs.com/cailijuan/p/10563464.html
Copyright © 2011-2022 走看看