【功能说明】
点击按钮时，页面跳转到对应区域
【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;}
【效果展示】
【源码查看】
