Working with Anchors

Anchors are a great way to navigate between or link to specific sections in your article, like manually inserting invisible bookmarks. To use anchors, you'll need to:

  1. Create the anchor itself
  2. Insert a link pointing to the anchor

Note: if you're thinking of using anchors to create clickable navigation like a table of contents at the top of an article, try our Article Table of Contents instead! It will update automatically as you add and edit content.

Creating anchors

Our new editor does not have a dedicated "Insert Anchor" button. For now, the best way to create an anchor is to add it directly in the Code View.

To create an anchor in the new editor:

  1. Put your cursor where you'd like to add the anchor.
  2. Click the Code View button. 
  3. Add this code, adjusting "anchorName" to be the name you'd like to use for your anchor:
    <a id="anchorName"></a>
  4. Save

An example looks like this:

Once that anchor exists, you can insert links to it either from the same article or from a different article.

Insert a link to an anchor within the same article

  1. Click the Insert Link button
  2. Type the anchor name into the URL field, and add a # in front of it (e.g. #this-is-an-anchor)
  3. Type the way you want the link to look into the Text field (e.g. Click Here)

Insert a link to an anchor in another article

Before you start, you'll need to know the anchor's name and the article's name. There are two ways to add this link. If your URLs rarely change, you can Insert a Link using the URL of the article with the anchor. If your article URLs might change, you'll want to Insert Link to Article and then add the anchor afterward.

Method 1: Insert a link using the article URL

  1. Navigate to the article you're linking to, and copy the article's URL after the .com (for example, this article's URL is https://support.knowledgeowl.com/help/working-with-anchors - we need /help/working-with-anchors)
  2. Click the Insert Link button and paste the URL into the URL field.
  3. Add a # to the end of the URL, followed by the anchor name (e.g. /help/working-with-anchors#this-is-an-anchor).
  4. Type the way you want the link to look into the Text field (e.g. Click Here). 
  5. Click the Insert link.
  6. Be sure to save your article once you're done!

Method 2: Insert link to article and add anchor

  1. In the article you want to add the link to, click the Insert Link to Article button.
  2. Type the name of the article you want to link to and set the link text. Insert the link. 
  3. Then click the link and select "Edit Link." In the URL field you'll see an /help/article-table-of-contents field rather than a true url. This is how we handle references to other KnowledgeOwl articles.
  4. Add a # and the text of the article name (e.g. #this-is-an-anchor) after the closing bracket for the hg-id: 
  5. Click the Update link to save your changes.
  6. Be sure to save your article once you're done!

Use cases

Most commonly, anchors are used to handle navigation within or between articles. If you're trying to create a set of clickable headings like a table of contents at the top of an article, see Article Table of Contents. But they can be great for quick navigation back to the beginning of an article, or for getting people directly to an often-used section.

Case 1: Quick navigation

Linus, our trusty Owl Documentarian, knows that some steps aren't always completed in order. Some articles have multiple headings and subheadings and he wants to be sure that people can easily find referenced steps or information.

For these kinds of articles, inserting a link to an anchor in the same article allows him to quickly cross-reference concepts in the same article and encourage exploratory navigation.

Case 2: Back to top

Linus tries to keep all of his articles short, sweet, and to the point. But some articles just end up being long. He likes to use an Article Table of Contents at the top, and for linear step-by-step guides, this is enough. But what about articles that are very long because they provide a lot of examples or answer a lot of Frequently Asked Questions? Linus hates making people scroll up a long way. It's hard when you don't have fingers.

It's a fairly common convention in websites to see a "Back to top" link at the end of various sections. This is a great use for anchors. Linus could put an explicit anchor in for this, but the way KnowledgeOwl is set up, he can actually just Insert Link, use # as the URL, and add a bit of text--like "Back to top":

For example:

Back to top

Combined with an Article Table of Contents and anchors to specific sections or sub-sections, this makes his articles very friendly for navigation.

Case 3: Frequently-referenced information

There are some steps or pieces of information in the middle of an article that Linus finds himself sending to readers often. In his article "Your first 2 weeks as a Knowledge Owl," he finds that owl recruits often need to be reminded to "Always look before you leap." Sure, he could make this topic a separate topic article and then insert it into the existing article. But an anchor is fast and easy. Now, instead of telling his owl recruits to go review the entire article, or to scroll to the "Always look before you leap" section, he can give them an explicit link to myknowledgebase/help/first-2-weeks#look-before-you-leap.

So instead of telling you to go find our "It's Owl Good" article and read the bottom about search feedback, we can just send you straight to the feedback section: https://support.knowledgeowl.com/help/its-owl-good#search-feedback

Let us know if you're using anchors in other ways that would make good use cases!