Create Anchor Links in Help Scout Docs

  • Replies:0
HuyenTran
  • Forum posts: 10

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:

  1. Highlight the text that should link to the header anchor.
  2. Click the link icon in the toolbar and select the Insert link option from the dropdown menu.
  3. Add your ID with a preceding # symbol in to the URL field. For our example above, it would look like this: #new
  4. 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.

Be the first to answer