Using anchor points to make simple index effect "Cssdemo"

"Feature description"

When you click the button, the page jumps to the corresponding area

"HTML code description"

"1" "Main frame"

<div class= "box" id= "box" >    // Add a layer of div to the outside of the details box to limit the height of the display area and avoid the scroll bar    <div class= " Listwrap ">        // Details box        <ul class=" list ">        </ul>            </div>    // Control Box    <nav class= "Conlist" >        // set href to #a, meaning click on the tab page will jump to the anchor point named 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" "Details list"

// a information, set ID of a, meaning that the anchor point is named a<li class= "in" id= "a" >    // title    
/ content    <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" >    
"CSS Key code description"
// The display height is 280px, the background color is #ccc, and no scroll bar . listwrap{    Overflow:hidden;    height:280px;    Background-color: #ccc;        width:500px;} // you can reach the top of the information box by setting a larger height value so that each anchor point in the detail box is linked . . list{    height:2000px;}
"Effect Show"
"Source View"
Using anchor points to make simple index effect "Cssdemo"