How do I create a jump-to link?
The anchor (or <a>) element is used to create hyperlinks between a source anchor and a destination. The source is a text, image, or button that links to another resource or destination. The destination can be a URL, an anchor, or an element with an id such as:
Here's a way to think about linking within a page. On your page you'll have two items:
- and -
The thing you want to jump to
The thing you want to jump from will be in the form of
<a href="mypage#my-section">Jump to destination</a>
The thing you want to jump to will be in one of two forms
where element may be anything with an ID attribute (e.g,. P, H1, DIV, etc.).
Creating jump-to destinations
Please note: rather than using anchor tags and element IDs to jump within a page, we encourage breaking up your content onto separate pages, then using the menu to navigate to those pages. However, if that's not feasible, here's how to add destinations to elements on your page.
Create a destination anchor <a>
This uses the Anchor tool in the WYSIWYG toolbar.
- In the WYSIWYG enter the link text for your destination.
- Select the link text as you would to create a link.
- In the WYSIWYG toolbar click on the flag icon ⚑. This will bring up the Anchor Properties dialog box.
- In the Anchor Name text box enter a unique name. This should be machine-readable with lower case letters, numbers, and dashes "-" instead of spaces,
- Click Okay, and you should see link styling around the destination link text in the WYSIWYG.
- Save your work.
Create a destination with an ID to a heading (e.g. <h2>)
This requires directly editing the HTML to add an ID attribute. When creating an ID, e.g. id="destination-name-b", it must be unique within the entire website.
- In the WYSIWYG on a separate line, enter the text for your destination.
- With your cursor on the destination text, select the heading, e.g. Heading 2, from the paragraph format dropdown menu in the WYSIWYG toolbar. Hint: this dropdown indicates the current format and probably says Normal.
- Reveal the underlying HTML by clicking on Source in the WYSIWYG toolbar.
- Find the heading with destination text. It'll be of the form <h2>destination text</h2>.
- As part of the first heading tag, before the first >, add a unique id,
e.g. <h2 id="my-destination-b">destination text</h2>.
- Save your work.
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:
- Move your mouse pointer over the destination anchor.
- Click right or use a two-fingered click to bring up the menu.
- 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.
Creating a jump-from source link
The source link will look like a typical URL with an appended #destination. The destination is the unique anchor name or id that you added in the Creating jump-to destinations section above.
Create a source link
Jump from anywhere
Creating a source link is just like creating any other link as described on the page "How do I add links to text?", except when you add the URL of the page, you append # and the unique destination name or id, e.g.
<a href="https://mysite.stanford.edu/page-name#my-destination-a">Source text</a>
Jump within a page
If both the source anchor link and destination are on the same page, the source anchor link need only use #destination, e.g.
<a href="#my-destination-b">Source text</a>
Jump within a site
If both the source anchor link and destination are in the same site, the source anchor link can consist of a link to the node and #destination, e.g.
<a href="/node/816#my-destination-node">Source text</a>
Please note: If the URL changes or is not valid, the WYSIWYG editor may strip out part or all of the URL.
Use descriptive IDs
You can choose any ID attribute, as long as it is unique. Consider using ID attributes that describe your content, not the order in which the content appears. For example:
describes contact information on a FAQ page. Using descriptive ID attributes is helpful because if you reorder your content; your numbering system won't break. Furthermore, you'll also see that the resulting URL will also describe the content:
Identify in-page links
When a page gets long, some users may not realize that they are still on the same page after clicking to an anchor link. Use a standard preceding phrase such as "In this page:" or "Jump down to:" to help users understand that link will keep them on the same page.
Doing More with Jump-to links
Add a Title attribute
Adding a title attribute (e.g. title="Name of page") to your source link creates a hover effect. This allows you to add text that will appear when your mouse pointer hovers over the link. Check it out by hovering over the example:
Adding a title attribute to a link requires directly editing the html.
- Create your link as described on the page "How do I add links to text?"
- Reveal the underlying HTML by clicking on Source in the WYSIWYG toolbar
- Find your link
- Add the title attribute and text to anchor (<a>) before the first >, e.g.
<p><a href="#adding-jump-to-dest" title="This is title text">This is a link</a></p>
Title attributes work with <a> tags, they are currently not allowed by the WYSIWYG on most other elements.
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.