Linking to specific spots within a page can be useful on long pages with multiple sections. Following is an explanation of the code and process followed by instructions for our Drupal 7 and Drupal + sites.
To create a link that jumps people who click it to a specific part of the page, you need 2 things:
- An anchor
- A link
The anchor goes it the place you want to jump to. To add an anchor edit the source code and add a unique id attribute to any tag.
Example:
<h2 id=”jump-here”>Content Heading</a>
If there is no element in the source code to add the id attribute to, you can add an <a> tag without a source attribute, like so:
<a id=”jump-here”></a>
The link will be formatted with a pound sign in front of the anchor text.
If the link and the anchor are on the same page
<a href=#jump-here”>Link further down the page</a>
Drupal + Way
Drupal 7 Way
Drupal 7 requires a two-part process…
First you must create an anchor in the document at the point you want to link to.
- Position your cursor at the desired point in the document.
- Click on the Anchor button.
- In the pop-up type a name for your Anchor. It must be alpha numeric and can use dashes but no spaces and should not begin with a number.
Second you create a link that points to this anchor in the same page. (Below are instructions if you want to jump to an anchor in a different page.)
- Create a link as you normally would using the Link button.
- Choose Link to anchor in the text from the Link Type dropdown.
- Then select your anchor from the By Element Id dropdown and click OK.
You will now see an anchor icon where your cursor was. Don’t worry, this anchor icon is only visible in the editor interface. 
Jump to an Anchor in a Different page
- Follow the steps in the first part above and save the page.
- Open the page that you want to add the link to and create a link as you normally would using the Link button and “Internal path” option in the “Link Type” field.
- You will have to then edit the source code. Find the link you just created. It will look something like:
<a href=”/link_text”>The clickable text</a>
and add a slash, pound sign and the anchor name to the end of the URL address. So that it looks like:
<a href=”/link_text/#mars”>The clickable text</a>
Back to Top
If you’ve used the anchors to create a table of contents at the top of the page you may wish to add a Back to Top link below each section so your visitors can easily jump back to find the next area that will interest them.
Improve Mobile Experience
Since content gets so narrow on mobile it may be useful to combine a jump link and the hide on desktop class.
