Internal Page Navigation (Anchor Links)

ReminderLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tellus elementum sagittis vitae et.

Use Internal Page Navigation by Creating Sections and Anchor Links

  • Use <section id="section_name"> and </section> tags around the section you want to define as a navigation point.
    • You can also just add id="item1" to some other tags as I did with the items 1-7 links below, where it was added to the <div> tag like this: <div id="item1" class="collapsible-block" style="box-sizing: border-box; width: 100%;">.
  • Then use <a href="#section_name"> and </a> tags where you want the link to appear in the page.
    • Using the "#top" ID will always take you to the top of the web page without having to create and use the <section id="top"> and </section> tags.
    • There is no equivalent "#bottom" or "#end" ID, but by adding <div id="end"></div> at the end of all of your content you can use "#end".
  • Clicking on the link will take you to that section.
  • For the collapsible menus I used custom accordion menus from my Code Snippets Page, then added id="item1" to the first <div> tag for each item. E.x.: <div id="test_section_1" class="collapsible-block"...>

 

Page Navigation: Section 1



Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tellus elementum sagittis vitae et. Aliquet enim tortor at auctor urna nunc id cursus. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget. Sem et tortor consequat id porta nibh venenatis cras. Id aliquet risus feugiat in ante. Nisl rhoncus mattis rhoncus urna neque viverra justo nec ultrices. Ornare aenean euismod elementum nisi quis. Ornare quam viverra orci sagittis eu volutpat odio. Nibh tortor id aliquet lectus proin nibh nisl. Ac tincidunt vitae semper quis. Nulla pellentesque dignissim enim sit amet venenatis. At tellus at urna condimentum mattis pellentesque id nibh. Velit dignissim sodales ut eu sem integer vitae justo. Adipiscing bibendum est ultricies integer quis.

Item 1

►

Item 2

►

Item 3

►

Item 4

►

Item 5

►

 

Page Navigation: Section 2



Odio tempor orci dapibus ultrices in. Id diam maecenas ultricies mi eget mauris pharetra. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in. Egestas congue quisque egestas diam. At imperdiet dui accumsan sit. Amet est placerat in egestas erat imperdiet sed. Massa ultricies mi quis hendrerit dolor magna eget. Viverra adipiscing at in tellus integer feugiat scelerisque. Diam phasellus vestibulum lorem sed risus ultricies. Risus ultricies tristique nulla aliquet enim tortor at auctor urna. Felis bibendum ut tristique et egestas. Aenean pharetra magna ac placerat vestibulum lectus mauris ultrices. Urna duis convallis convallis tellus id interdum velit laoreet. A diam maecenas sed enim. Habitant morbi tristique senectus et netus et malesuada fames ac. Consequat mauris nunc congue nisi vitae suscipit tellus mauris a. Aliquet enim tortor at auctor urna nunc id. Facilisis leo vel fringilla est ullamcorper eget nulla. Habitant morbi tristique senectus et netus et.

Item 6

►

Item 7

►