柚子快报激活码778899分享：利用锚点制作简单索引效果

http://yzkb.51969.com/

[1]功能说明

[2]HTML代码说明

[3]CSS代码说明

[4]效果展示

[5]源码查看

【功能说明】

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

 

【HTML代码说明】

 　　【1】【主体框架】

/*最外边再套一层div，是为了隐藏滚动条*/

/*将详细信息框外边再套一层div,是为了限制展示区的高度*/

/*详细信息框*/

/*控制框*/

 

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

    }

     

    【效果展示】

     

    【源码查看】

     

    柚子快报激活码778899分享：利用锚点制作简单索引效果

    http://yzkb.51969.com/

    精彩文章

    评论可见，请评论后查看内容，谢谢！！！评论后请刷新页面。