Jump-to links using ID tags

Jump-to links direct visitors to a specific part of a page, rather than the entire page itself. This may be useful for referencing content that is further down the page for faster access, or for creating links that direct visitors to a specific part of the page. Here are some examples of how jump-to links behave:

Jump-to:

Creating jump-to links | Components of jump-to links | Creating anchor links

Components for jump-to links:

Jump-to links are made up of two parts. 

• ID: An id tag, id="insert name of tag", is used to create hyperlink to the specific part of the page.
  • <h2 id="sect-one">Section Title</h2>
• Link: The link filed will be used to direct visitors to the id tag and the specific part of the page. 

Create jump-to link with <source> code:

It is recommended to create "id" tags by going into <source> code.

Step 1: Enter your text and click on "source" icon

Step 2: Add a "id" tag to the text style <h2 id="sect-one">Section Title</h2>

Step 3: Create a link that directs visitors on the id tag (on the same page)

• If the link is directing visitors to content on another page on the site, include the full trail to the id tag in the url field: /pagetitle#id tag. i.e. Link to description of a jump-to link on the glossary page. 
  • 

Note: When logged in as a drupal site admin, the link jumps below the "id tag". This will not be the case of site-visitors. Test your link after logging out. 

Create anchor link using Flag icon:

Step 1: Use the "flag" icon to create and name your anchor

• Use the "linked" icon to create a link with the anchor
  • In the URL field enter hashtag, plus anchor name #anchor-name
  • 

Note: When logged in as a drupal site admin, the link jumps far below the "anchor". This will not be the case of site-visitors. Test your anchor link after logging out. 

Inspect your work

After clicking saving your work you can use the browser to inspect the destination. Here's how to do this for most browsers:

1. Move your mouse pointer over the destination anchor.
2. Click right or use a two-fingered click to bring up the menu.
3. Select Inspect. This will bring up the developer tools with the HTML for destination anchor highlighted. In the HTML you should see the anchor name.

Troubleshooting jump links

• If the destination URL changes, it may break your source link. What can happen is that when saving your work in the WYSIWYG, the editor can detect invalid links and remove them. It is then necessary to recreate them. 
• Anchor link is removed from the WYSIWYG editor if you attempt to drag it somewhere else in the text area.