【功能说明】

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

 

【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;}

 

【效果展示】