Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

Using anchor points to make simple index effect

2025-01-28 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Network Security >

Share

Shulou(Shulou.com)06/01 Report--

[function description]

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

[HTML code description]

[1] [subject framework]

/ * the outermost layer is covered with div To hide the scroll bar * / / * to cover the outside of the detail box with a layer of div, it is to limit the height of the display area * / / * details box * / / * control frame * / / * set the href to # a Click on the tab page to jump to the anchor named a * / A B C D E

[2] [details list]

/ / An information, set id to a, which means that the anchor point is named a / / title A / / content A.1 A.2 A.3 A.4 A.5 B B.1 B.2 B.3 B.4 B.5

[description of CSS key codes]

/ / set the width to be narrower than the child width 20px, and set overflow:hidden to hide the scroll bar and scroll. ListWrapOut {width: 480px; overflow:hidden;} / so that the height is 280px and the background color is # ccc.listWrap {overflow:auto; height: 280px; background-color: # ccc; width: 500px } / / set the calculated height value so that when each anchor point in the detail box will be linked, it can reach the top of the information box. List {height: 1080px;}

[effect display]

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Network Security

  • Position

    © 2024 shulou.com SLNews company. All rights reserved.

    12
    Report