Please read about Anchor Links, then follow the instructions below.
On this page:
The Anchor in Drupal
The Drupal 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, and therefore have an anchor you can link to.
This means you can link from other pages directly to any heading on any page.
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.
Common User Interface Design Patterns Using Anchor Links
Consistency throughout the website is extremely important. It’s important that you know the “way” your website does the following:
Back to Top Link
We highly recommend adding a “Back to Top” link on the bottom of long pages or sections of a page, if not all pages. When clicked the link will move the visitor all the way to the top of the page.
This is especially helpful for mobile and small screens where the visitor will have to scroll a long way back to the top.
For this purpose, use the reusable block.
Table of Contents
A list of links at the top of a page, such as those found on this page under the bold text “On this page:” can be extremely helpful for website visitors. It provides an overview of the content and allows visitors to quickly jump to what they want to read.
Each of our websites does this a little differently. Most use a variation of the Quick Links block. Your site may use different heading and anchor text, a different placement on the page or a different style. Please see the Content Editor Guide for your website and follow the convention for your site design pattern outlined there, in order to remain consistent.
We highly recommend using “Back to Contents” links in conjunction with a Table of Contents. See the next section on Improving the Mobile Experience with a Back to Content Link.
Improve the Mobile Experience with a Back to Contents Link
When using a table of contents style menu we highly recommend using a “Back to Contents” link in addition to the “Back to Top” link. The Back to Contents link will take people back to the top of the table of contents style menu which may be much lower on the screen than the top of the page. This is especially important for mobile visitors on a small screen.
For this purpose, use the reusable block. You must follow the instructions on your site’s Content Editor Guide for the link to work correctly.
Changing the Design Pattern or Style
If you do not like the style, layout, verbiage or have other issues with the design pattern used by your website for the Back to Top links, Table of Contents, or Back to Contents links, please contact the COFA Web team.
Other Tips
Since content gets so narrow on mobile it may be useful to consider ways to curate the mobile experience by combining a jump link and the hide on desktop class.
