Anchor Links

An anchor link, also known as a "jump link" or "page jump," is a hyperlink that, when clicked, instantly takes the user to a specific section on the same page (or a specific part of a different page) rather than just the top.

How They Work
 

Anchor links function as "bookmarks" within a digital document or webpage. They consist of two technical parts: 

• The Anchor (The Destination): A unique identifier (ID) assigned to a specific element, such as a heading or a paragraph.
• The Link (The Trigger): A URL that includes a hashtag (#) followed by the unique ID of the destination (e.g., https://example.com).

Create Your Links

First, we create the anchor, using the “id” attribute.  

<a id=”anchor-name”>The place where you want to jump</a>

You can place the id within any element-
 

• anchor within a header: <h2 id="anchor-name">Section name</h2>
• anchor within an image: <img id="anchor-name" src="/images/imgname.jpeg"/>
• anchor within a paragraph: <p id="anchor-name">Paragraph name</p>

Each ID is unique and can be used only once per page. They are also case-sensitive

Then, we create a hyperlink using the id of of the link target, preceded by #
 

<a href=”#anchor-name”>Jump to the part of the page with the “anchor-name id</a>
 

 Link to another page in the same domain:

<a href=”/about/team/Committees-and-Task-Forces#anchor-name”>Jump to the part of the page with the “anchor-name id</a>

Example of a page with anchor links-
 https://www.vrma.org/about-us/vrma-committees

Link from another website:

<a href=” https://www.iabc.com/about/team/Committees-and-Task-Forces#anchor-name”>Jump to the part of the page with the “anchor-name id</a>

NOTE:

On some sites, you may see name=”anchor-link” used instead of id=”anchor-link”.     Both will function as anchors, but the “name” value has been depreciated, and may not work in HTML 5.    Always use “id” instead of “name” 

Anchor Links in DNN

DNN has built in functionality to add anchor links to a page through the WYSYWG.
Watch this tutorial to see how it works.

What if my anchor links jump to the wrong spot in DNN

Many DNN sites use a megamenu, so it may appear that your anchor links are jumping to the wrong spot.   They are not.   They are jumping to the correct spot, but the anchor is behind the menu.  We can correct that with CSS.   The following code adds padding to the anchor to push it below the navigation.

<!--- ADD TO TOP OF PAGE ABOVE HTML -->

<style>

              .anchor {

              display: block;

              height: 180px; /*same height as header*/

              margin-top: -180px; /*same height as header*/

              visibility: hidden;

}

</style>

Then add class=”anchor” to your link

 <a href=https://www.iabc.com/about/team/Committees-and-Task-Forces#anchor-name class=”anchor”>Jump to the part of the page with the “anchor-name id</a>

 Reach out to USS if you need this code added to your site CSS