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:

 <h2 id="my-intro">Introduction</h2>

Here’s a way to think about linking within a page. On your page you’ll have two items:

The thing you want to jump from

 – 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

<a>destination<a>

or

<element id="my-section">destination</element>

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 are two approaches for adding jump-to destinations to elements on your page.

Create a destination anchor <a>

This uses the Anchor tool in the WYSIWYG toolbar.

1. In the WYSIWYG enter the link text for your destination.
2. Select the link text as you would to create a link.
3. In the WYSIWYG toolbar click on the flag icon ⚑. This will bring up the Anchor Properties dialog box.
4. 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,
   e.g. my-destination-a.
5. Click Okay, and you should see link styling around the destination link text in the WYSIWYG.
6. 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.

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. Hint: this dropdown indicates the current format and probably says Normal.
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>.
5. As part of the first heading tag, before the first >, add a unique id,
   e.g. <h2 id=”my-destination-b”>destination text</h2>.
6. Save your work.

Please note: the WYSIWYG editor allows the ID attribute only on headings, and will strip out the ID attribute from other elements.

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.

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>

Example of jumping from anywhere

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>

Example of jumping within a page

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>

Example of jumping within a site

Please note: If the URL changes or is not valid, the WYSIWYG editor may strip out part or all of the URL.

Best Practices #

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:

<h3 id="faq-contact">FAQ Contact</h3>

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:

This is a link with a title attribute

Adding a title attribute to a link requires directly editing the html.

1. Create your link as described on the page “How do I add links to text?“
2. Reveal the underlying HTML by clicking on Source in the WYSIWYG toolbar
3. Find your link
4. 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.

Please note: because screen reader users and other users of assistive technology will navigate a page solely by the links, we encourage keeping the visible link text as descriptive as possible. Learn more about accessibility concerns from MDN.

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.

source : https://userguide.sites.stanford.edu/tour/paragraphs/text-area/add-links-text/create-jump-link#jump-in-page