Same-Page (Anchor) Links for Navigation
Code Snippet Library
This page has some sample content showing how anchor or same-page links work to provide an easier way to navigate to a section of a long page. In this example we have the main heading which is an h2 and then subheadings that are h3. In your context, all the headings might be h2 if you don't have a main heading other than the page name. In this example, the section links are below the main heading and then each section has a "return to top of page" link.
Example Content: Main Heading
Section One
We are excited to offer this opportunity for faculty and staff to gain additional knowledge and be aware of resources for supporting World Campus students. This course was designed to help faculty and staff determine the most appropriate and efficient ways to help students who may be experiencing different forms of distress. Please note that this course addresses processes and resources in World Campus, which may be different than your home campus. There are two modules for completion. The first module is focused on identifying mental health concerns and referrals/resources.
We are excited to offer this opportunity for faculty and staff to gain additional knowledge and be aware of resources for supporting World Campus students. This course was designed to help faculty and staff determine the most appropriate and efficient ways to help students who may be experiencing different forms of distress. Please note that this course addresses processes and resources in World Campus, which may be different than your home campus. There are two modules for completion. The first module is focused on identifying mental health concerns and referrals/resources. The second module is focused on behaviors referred to the Office of Student Conduct and specifics for supporting students who may need support through Care and Concern. We anticipate your participation in this OL course to range from 2–4 hours. To begin, review the Course Syllabus for more information on expectations and course completion requirements. Click on Modules on the left navigation menu to start the course! Thank you again for completing this course. If you have additional questions or would like to reach out to the instructors of this course, contact information is included below.
Section Two
We are excited to offer this opportunity for faculty and staff to gain additional knowledge and be aware of resources for supporting World Campus students. This course was designed to help faculty and staff determine the most appropriate and efficient ways to help students who may be experiencing different forms of distress. Please note that this course addresses processes and resources in World Campus, which may be different than your home campus. There are two modules for completion. The first module is focused on identifying mental health concerns and referrals/resources. The second module is focused on behaviors referred to the Office of Student Conduct and specifics for supporting students who may need support through Care and Concern. We anticipate your participation in this OL course to range from 2–4 hours. To begin, review the Course Syllabus for more information on expectations and course completion requirements. Click on Modules on the left navigation menu to start the course! Thank you again for completing this course. If you have additional questions or would like to reach out to the instructors of this course, contact information is included below.
We are excited to offer this opportunity for faculty and staff to gain additional knowledge and be aware of resources for supporting World Campus students. This course was designed to help faculty and staff determine the most appropriate and efficient ways to help students who may be experiencing different forms of distress. Please note that this course addresses processes and resources in World Campus, which may be different than your home campus. There are two modules for completion. The first module is focused on identifying mental health concerns and referrals/resources. The second module is focused on behaviors referred to the Office of Student Conduct and specifics for supporting students who may need support through Care and Concern. We anticipate your participation in this OL course to range from 2–4 hours. To begin, review the Course Syllabus for more information on expectations and course completion requirements. Click on Modules on the left navigation menu to start the course! Thank you again for completing this course. If you have additional questions or would like to reach out to the instructors of this course, contact information is included below.
Coding Information
Each section link should match the heading and include a unique identifier that should also be descriptive. For example, if you have a heading such as Course Assignments, the link should be Course Assignments and the identifier would be something like #assignments or #assign. Whatever you choose, each one must be unique and associated with the section link at the top and the related page heading.
Code: Same-Page Links for Navigation
There are three parts to this code:
- Top anchor links are placed at the top of the page:
<p><a id="top" href="#one" >Section One</a> | <a id="top" href= "#two" >Section Two</a></p>
- Code is added to each heading:
- Heading code Section 1:
<h3><a id="one" name= "one" ></a>Section One</h3>
- Heading code Section 2:
<h3><a id="two" name="two"></a>Section Two</h3>
- Heading code Section 1:
- Return to Top links are added at the end of each section:
<div style="text-align: right;"><a href="#top">return to top of page</a></div>
Guidelines
- Same-page links allow for easier navigation on a long page with clear sections.
- Be sure to use proper headings for the page sections. Our example is using h3 headings, but your content may require a different heading level.
- Consider chunking content into shorter pages instead of using this approach.
Good - these links will work for people using any input device or mobile device.