How to insert internal links on a page or create a table of contents

Benwa Updated by Benwa

To create pages with the Code editor, you need the "Create new pages" permission.

When you create a page with the Code editor, it's common to want to add "anchor links," or links that take the reader directly to content further down the page. For example, you may want to create a table of contents at the top of the page to allow your reader to jump straight to a specific section.

For security reasons, Opendatasoft forbids using JavaScript to do this, but it's possible to create this kind of link without using JavaScript (though to use the Code editor you'll have to use some basic HTML).

This article explains how to insert internal links into your page, with a few examples from other Opendatasoft portals.

  1. First, you need to identify where you want the link to go. That's where you're putting down your "anchor." Usually these are the titles of the different sections on your page.
    For this you define an id attribute where you want to be able to send the user. In this case, in an h2, you're adding the id "anchor-name".
    <h2 id="anchor-name">Section name</h2>
  2. Then, once you've dropped your anchor, you can link to it, and thus take your user directly to that content. In HTML, to link to an id, you use the hash sign ("#") followed by the anchor name.
    <a href="#anchor-name">Go to the section with the anchor "anchor-name"</a>
    Remember, the "#" goes before the anchor name in your link, but not in the id itself.

Creating a table of contents

Using anchors in this way, you can easily add a clickable table of contents.

  1. For each relevant section, define the id attribute in the way that's most appropriate for you. Here we have generically called them "title1", "title2", and "title3". Note that the id does not have to be the same as the actual title.
<h2 id="title1">Lorem ipsum</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
<h2 id="title2">Dolore eu fugiat</h2>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<h2 id="title3">Vitae elementum</h2>
Integer dignissim venenatis lacus, vitae elementum ante mollis quis. Etiam vehicula neque nec felis maximus lobortis.
  1. Then, in order to create the table of contents, you need to insert the necessary links.
<span>
  <b>Table of contents</b><br/>
  <a href="#title1">Lorem ipsum</a><br/>
  <a href="#title2">Dolore eu fugiat</a><br/>
  <a href="#title3">Vitae elementum</a>
</span>
For long pages, websites often add a link at the bottom of the page to an anchor at the top, thus giving your reader a way to jump back to the top and not have to scroll.

Some examples

Here are two data portals with these types of links:

The HTML code in action

Here, you can see the result of the HTML code above:

Table of contents
Lorem ipsum
Dolore eu fugiat
Vitae elementum

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Dolore eu fugiat

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Vitae elementum

Integer dignissim venenatis lacus, vitae elementum ante mollis quis. Etiam vehicula neque nec felis maximus lobortis.

How did we do?

Content pages: ideas, tips & resources

Sharing and embedding a content page

Contact

Powered by HelpDocs (opens in a new tab)