Linking to Another Spot on the Page Last Updated June 2026 When someone clicks a link with to an “anchor”, the browser will load the page as close to the content as possible at the top of the screen and, in the case of tabs, with the specific tab content revealed. Please read about Anchor Links, then follow the instructions below. On this page: The Anchor in Drupal Linking to the Anchor Common User Interface Design Patterns Using Anchor Links Back to Top Link Table of Contents Improve the Mobile Experience with a Back to Contents Link Changing the Design Pattern or Style Other Tips The Anchor in Drupal As described in the general Anchor Links page, you can edit the Source code to add your own anchors. Also, the website automatically adds anchors to: all headings. In other words, any h1 – h6 tag, including most Title and Headline fields of blocks in Layout Builder. tabs, such as those found on the Profile content type and the Tab display option on the Flex List block type. However, If you use this feature with the option that allows you to display content as tabs on desktop that becomes an accordion hide reveals on mobile, the link will not work for the accordion hide reveal on mobile. The system uses the text entered in the heading tag or title field of the tab. 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 -1 Based on this you can usually guess what the anchor text should be so you can use it as the anchor for your link. Unfortunately, you will not see the anchor in the Source Code of the editor interface. You will only see it if you inspect it in the browser. Contact the COFA Web team if you need assistance determining the anchor text. Linking to the Anchor Links to a URL that has an anchor can usually be added the same as any other link. Read the section about how to format a link with an anchor on the general Anchor Links page. 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.
