Jump links using ID tags

Jump links direct visitors to a specific part of a page, rather than starting at the top of the page. You can use Jump links for in-page links such as footnotes.

Here are examples of in-page jump links: 

• Components for jump links
• Creating the destination
• Creating an in-page jump link
• Creating a jump link from one page to another page within your website
• Creating footnotes

Components for jump links

To create a jump link you'll need a destination and a jump link pointing to that destination. You can create the destination by adding an "id" attribute and value to a heading. You create the jump link by appending the value of the "id" to your link. 

The destination

The destination will be included in a heading using the following format:

<h[2-5] id="[unique-name]">[heading name]</h[2-5]>

The "unique-name" will need to be

1. Unique on the page.
2. Machine readable: lower case with dashes and no spaces.

For example:

<h3 id="create-destination">Create the destination</h3>

The jump link

The jump link will be a link appended with "#" and the ID value in this format:

[URL]#[unique-name]

For example:

https://sitesuserguide.stanford.edu/tour/paragraphs/text-area/add-links-text/jump-links-using-id-tags#create-destination

Create the destination

To create the jump link destination add an unique "id" attribute and value to a heading. To do this, you'll need to edit the HTML source code. Learn about editing source code. 

Consider using ID attributes that describe your content. It allows you to reorder your content and the resulting URL will also describe the content.

1. In the WYSIWYG on a separate line, enter the text for your destination.
2. With your cursor on the destination text, select the heading, e.g. Heading 2, from the paragraph format dropdown menu in the WYSIWYG toolbar. 
   
3. Reveal the underlying HTML by clicking on Source in the WYSIWYG toolbar.
4. Find the heading with destination text. It'll be of the form <h2>destination text</h2>. Hint: You can use "cmd-F" or "ctrl-F" to find the text.
5. As part of the first heading tag, (before the first ">"), add the id,
   e.g. <h2 id="dest-text">destination text</h2>.
   
6. Save your work.

Please note: the WYSIWYG editor allows an ID attribute only on headings and <span> tags. It does not allow the ID attribute on all elements.

Creating jump links

A jump link is a typical URL with an appended #destination. The "destination" is the unique name that you used in Create the destination above. 

Create an in-page jump link

If both the jump link and destination are on the same page, the jump link need only use #[unique-name], e.g.

<a href="#dest-text">Jump link text</a>

Note: Because of the admin menu, when you're logged in, the jump link destination appears to jump below the "ID tag". This will not be the case for site visitors. Test your jump link after logging out of the website.  

Create a jump link within your Drupal site

To create a jump link that will work from anywhere within your website, append the #destination to the page URL, e.g.

node/1166#create-destination

Use jump links to create footnotes

A footnote is a short piece of text, often numbered, placed at the bottom of a printed page, that adds a comment, citation, reference etc, to a designated part of the main text, for example.¹ 

You can use jump links to add footnotes to your content. To do this, you'll need to edit the HTML source code. Learn about editing source code. 

Creating the footnotes (the destination) in the footer

1. Add a horizontal line at the end of the text for your page.
2. Add the text for each of your footnotes after the horizontal line.
3. Click Source in the WYSIWYG toolbar
4. Using the <span> tag, prepend a unique ID to the  footnote such as:
   <p> 
  <span id="footnote-01">[1]</span> Footnote text 
</p>

Adding the footnote references (the jump link) to the text

Use the link functionality to create a link from the footnote reference to the footnote. With both the text and the footnote on the same page, you identify the link by prepending a '#' to the name of the jump link.

1. Scroll back up on the page and place the footnote references or numbers in your text (e.g. footnote reference example 1).
2. Using the link functionality, highlight and add a link to the number. For the Link URL, add a URL of the form #[footnote ID], such as:
   #footnote-01 
   
    
   
3. Apply the superscript functionality "footnote reference example.¹" on the footnote reference.
4. Repeat these steps for each footnote reference you want to include on your page.

[1]  Example footnote

Inspect 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 text.
2. Right-click 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 the destination highlighted. In the HTML you should see the destination name.

Troubleshooting jump links

• The WYSIWYG editor can detect invalid links and remove them.
• If the destination URL changes, it may break your jump link. It is then necessary to recreate them.