【功能说明】

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

 

【HTML代码说明】

 　　【1】【主体框架】

        
             /*最外边再套一层div，是为了隐藏滚动条*/    
         
                   /*将详细信息框外边再套一层div,是为了限制展示区的高度*/        
          
                       /*详细信息框*/            
           
                                        
           
                
          
    
         
    /*控制框*/    
         
                  /*设置href为#a，意思是点击该标签页面将跳转到名称为a的锚点上*/        
          A        
          B        
          C        
          D        
          E    
         
        

 

　　【2】【详细信息列举】

//A信息，设置id为a,意思是将该锚点命名为a
    //标题    
A
    //内容    
         
          A.1
         
    
         
          A.2
         
    
         
          A.3
         
    
         
          A.4
         
    
         
          A.5
         
    
B
    
         
          B.1
         
    
         
          B.2
         
    
         
          B.3
         
    
         
          B.4
         
    
         
          B.5
         

 

【CSS重点代码说明】

//设置宽度比子级宽度窄20px，及设置overflow:hidden达到隐藏滚动条并可以滚动的效果.listWrapOut{    width: 480px;    overflow: hidden;}//使显示出高度为280px,背景颜色为#ccc.listWrap{    overflow:auto;    height: 280px;    background-color: #ccc;        width: 500px;}//通过设置计算后的高度值，使详细信息框里的每个锚点将链接时，都可以正好到达信息框的顶部.list{    height: 1080px;}