Drupal + Way
The Drupal Plus system automatically adds anchors to all headings in the HTML source code. In other words, any h1 – h6 tag. Most Title and Headline fields generate a heading tag in the HTML.
The system uses the text entered in the heading tag. It changes the text to all lowercase and adds dashes between each word. If there are multiple headings using the same words on a page it will version them by adding a dash followed by a number, like so -#
Alternately, you can edit the Source code to add your own id. The system will maintain the id that you enter.
Links to the anchors are added the same as any other link.
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.
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 or “Return to Contents” 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.