利用錨點(diǎn)制作簡(jiǎn)單索引效果

【功能說(shuō)明】

　　點(diǎn)擊按鈕時(shí)，頁(yè)面跳轉(zhuǎn)到對(duì)應(yīng)區(qū)域

【HTML代碼說(shuō)明】

 　　【1】【主體框架】

<div class="box" id="box">    /*最外邊再套一層div，是為了隱藏滾動(dòng)條*/
    <div class="listWrapOut">         /*將詳細(xì)信息框外邊再套一層div,是為了限制展示區(qū)的高度*/
        <div class="listWrap">            /*詳細(xì)信息框*/
            <ul class="list">                            
            </ul>        
        </div>
    </div>    /*控制框*/
    <nav class="conList">        /*設(shè)置href為#a，意思是點(diǎn)擊該標(biāo)簽頁(yè)面將跳轉(zhuǎn)到名稱(chēng)為a的錨點(diǎn)上*/
        <a href="#a" class="con">A</a>
        <a href="#b" class="con">B</a>
        <a href="#c" class="con">C</a>
        <a href="#d" class="con">D</a>
        <a href="#e" class="con">E</a>
    </nav>
</div>

　　【2】【詳細(xì)信息列舉】

//A信息，設(shè)置id為a,意思是將該錨點(diǎn)命名為a<li class="in" id="a">    //標(biāo)題
    <h3 class="in-tit">A</h3>    //內(nèi)容
    <div class="in-txt">A.1</div>
    <div class="in-txt">A.2</div>
    <div class="in-txt">A.3</div>
    <div class="in-txt">A.4</div>
    <div class="in-txt">A.5</div>
</li>
<li class="in" id="b">
    <h3 class="in-tit">B</h3>
    <div class="in-txt">B.1</div>
    <div class="in-txt">B.2</div>
    <div class="in-txt">B.3</div>
    <div class="in-txt">B.4</div>
    <div class="in-txt">B.5</div>
</li>

【CSS重點(diǎn)代碼說(shuō)明】

//設(shè)置寬度比子級(jí)寬度窄20px，及設(shè)置overflow:hidden達(dá)到隱藏滾動(dòng)條并可以滾動(dòng)的效果.listWrapOut{
    width: 480px;
    overflow: hidden;
}//使顯示出高度為280px,背景顏色為#ccc.listWrap{
    overflow:auto;
    height: 280px;
    background-color: #ccc;    
    width: 500px;

}//通過(guò)設(shè)置計(jì)算后的高度值，使詳細(xì)信息框里的每個(gè)錨點(diǎn)將鏈接時(shí)，都可以正好到達(dá)信息框的頂部.list{
    height: 1080px;
}

【效果展示】