利用锚点制作简单索引效果【CSSdemo】

【功能说明】

　　点击按钮时，页面跳转到对应区域

【HTML代码说明】

　　【1】【主体框架】

<div class="box" id="box">
    //将详细信息框外边再套一层div,是为了限制展示区的高度，并避免出现滚动条
    <div class="listWrap">
        //详细信息框
        <ul class="list">
        </ul>
    </div>
    //控制框
    <nav class="conList">
        //设置href为#a，意思是点击该标签页面将跳转到名称为a的锚点上
        <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】【详细信息列举】

//A信息，设置id为a,意思是将该锚点命名为a
<li class="in" id="a">
    //标题
    <h2 class="in-tit">A</h2>
    //内容
    <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">
    <h2 class="in-tit">B</h2>
    <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重点代码说明】

//使显示出高度为280px,背景颜色为#ccc，并且无滚动条
.listWrap{
    overflow:hidden;
    height: 280px;
    background-color: #ccc;
    width: 500px;

}
//通过设置比较大的高度值，使详细信息框里的每个锚点将链接时，都可以到达信息框的顶部
.list{
    height: 2000px;
}

【效果展示】

【源码查看】