Use the anchor to create a simple index [CSSdemo] and an index result cssdemo

Use the anchor to create a simple index [CSSdemo] and an index result cssdemo

[Function description]

When you click the button, the page will jump to the corresponding area

 

[HTML code description]

[1] [subject framework]

<Div class = "box" id = "box">/* append a div with the outermost side, it is to hide the scroll bar */<div class = "listWrapOut">/* Add a div outside the details box, is to limit the height of the display area */<div class = "listWrap">/* Details box */<ul class = "list"> </ul> </div> </div>/* Control Box */<nav class = "conList">/* Set href to #, click this tab to jump to the anchor 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] [list details]

// A information, Set id to, it means to name the anchor as a <li class = "in" id = "a"> // Title 

 
[CSS key code description]
// Set the width to 20 PX lower than the Sub-Level Width, and set overflow: Den den to hide the scroll bar and scroll. listWrapOut {width: 480px; overflow: hidden;} // The height is 280px and the background color is # ccc. listWrap {overflow: auto; height: 280px; background-color: # ccc; width: 500px;} // set the calculated height, so that each anchor point in the details box can be connected to the top of the information box. list {height: 1080px ;}
 
[Effect display]

 
[View Source Code]