Adding Anchor Links
If you've never used anchor links, anchor links are literal in-code anchors used for navigation (just like a boat anchor holds a boats position). They are useful for adding in-page navigation to help traverse lengthy content or for sending users to a particular section of a page. You may have noticed that anchor links may not work the way you expect them to with CKEditor in Drupal. That's because the version branch of CKEditor used for UT's Drupal 7 package only supports the deprecated method of anchor links where there’s an empty <a name="my-anchor-link"></a> (link tag) placed in the content code. It's not problematic to use the older method that functions natively, but that method is less than ideal since it has been deprecated. The modern and best practice method is outlined below.
Creating the Anchors
You need to give the heading of each content section a unique ID (in this case, <h2 id="myname">). Since there’s no way to do it from the edit friendly view, it has to be done from the source view as shown below (click the Source button in the ribbon).
Creating the In-Page Navigation Menu
2. Now that you have an actual "id" to anchor to, you need to add it to the new link you’ve created for the in-page navigation (WYSIWYG B field in this case), via the source view again using a link tag (<a href="#anchor-name-used">my link name</a>). Alternatively this part can be done from the WYSIWYG view as shown in step 3.
It can also be done from the edit friendly view by clicking inside an existing link, or highlighting a non-existing link and clicking the chain link icon (choose the “Link Type” option - URL), then enter the intended #my_anchor_name in the URL field. In the example below, the anchor name is “pollinatorprogram”
- Important: You need the “#” sign in front of the anchor link name for the anchor link to work as expected.
When using this method, you’ll notice if you click inside the link to edit it as above, that it will initially identify it as an anchor link and will say “No Anchors Found” – it’s because it doesn’t recognize this more modern method natively. When you click the “Link Type” selection box and change to “URL”, it won’t show the anchor link you've already added as shown in the screenshot above, but you can enter something different if needed and it will change it
Further Enhancement
The above steps can be combined with the classes used with our adding a custom resource block with quick links styling tutorial to create a nicer and in-style looking sidebar anchor navigation for the page headings.