- Forum posts: 10
Jul 14, 2020, 4:54:23 AM via Website
Jul 14, 2020 4:54:23 AM via Website
Anchor links allow readers to jump to a specific part of the page. If your article is really long or text-heavy, consider creating a table of contents or index using anchor links for quick navigation. This article will teach you how to insert anchor links in the Help Scout Docs editor using the id HTML attribute.
Add an ID to an HTML Element
In the example shown below, clicking on the Editing Your Beacon Mode link will automatically send the reader to the Editing Your Beacon Mode heading further down in the article. We added an id attribute to the h3 header element so that we can create a link to it. Our example is using the header element, but you can add an ID to many different HTML element to create an anchor link.
Toggle the HTML editor by clicking the icon on the toolbar. Within the
tag, we add id="editing" to give this header its ID. Here's what our header looks like with an ID:
Editing Your Beacon Mode
Creating the Anchor Link
With the header ID in place, complete the anchor connection by adding a link to that header:
- Highlight the text that should link to the header anchor.
- Click the link icon in the toolbar and select the Insert link option from the dropdown menu.
- Add your ID with a preceding # symbol in to the URL field. For our example above, it would look like this: #new
- Click the blue Insert button when you're finished.
Here's what the finished anchor looks like in the HTML editor:
Editing Your Beacon Mode
Make sure to preview the article to test your anchor links before publishing.
Recommended editorial content
With your consent, external content is loaded here.
By clicking on the button above, you agree that external content may be displayed to you. Personal data may be transmitted to third-party providers in the process. You can find more information about this in our Privacy Policy.