导航移动到指定位置

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="width: 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);
}

 

转载于:https://www.cnblogs.com/cailijuan/p/10563464.html