The Anchor Element

Add anchor links to your page for within-page navigation.

Alex Piepenbrink avatar
Written by Alex Piepenbrink
Updated over a week ago

An anchor link is a link that navigates users to a specific location on the page, and is sometimes referred to as a jump link. Use the anchor element when you want users to be able to navigate to a destination further down the same page, or to a specific location on a different page of your site.

The anchor element will not be visible to your users on the published web page; it will only be visible in the TIME Sites Design Studio. Place the anchor element where you want the link destination to be. Then, once you've linked a button or other element to this anchor, users who click on that link will automatically scroll to the location of the anchor.

A couple things to remember:

  • The anchor is the destination, not the link itself.

  • The anchor link will always scroll to the top of your screen.

  • Anchors can can only be dropped between elements. They cannot be dropped inside another element.

Adding an anchor to the page

Click and drag the anchor element icon from the left toolbar onto your page: 

Place the anchor in the location where you want users to go when they click a link.

You'll see a green horizontal line extending from the anchor element across the page. This is a visual indicator of the location on the page that users will scroll to when they click the link:

Adding space between your content and your anchor link

When you click on an anchor link, the top of your new section may be cut off by your navigation if you have it set to sticky or fixed to page. To avoid this from happening, make sure your section has a top margin or padding that is equal to or greater than the height of your nav bar. Now there will be enough of buffer space between your anchor at the top of your page and the start of the content of that section.

If the sections are too narrow or you can't add that much margin or padding between sections, you can also place an anchor one section above where it should go. That way that top section gets cut off by the header and the section you want to be seen has better placement on the page.

Moving anchors

An anchor can be moved around the page by grabbing it at its left edge and dragging:

You can also select the anchor links and move it in the page structure panel.

Naming anchors

Once on a page you can give it a name by double-clicking on the text, then typing the new name:

Note that for anchor links to work correctly, there are some limitations on how they can be named. If you type a name that isn't supported (for example, it contains spaces or characters that aren't allowed), the anchor element will automatically correct itself to an acceptable format.

Deleting anchors

Like other elements in TIME Sites, anchors can be deleted from the page by selecting them and pressing the <delete> key on your keyboard, or by selecting "Delete" from the Edit menu in your top toolbar. You can select the anchor links either directly on the page or in the page structure panel.

Linking to Anchors

Once you've added the anchor element to your page, you'll need to link something to it. This can be a section of text, a button, image, a link on your link list, or any other element of your choosing.

To access the linking panel, select the element you want to link and click on the gear icon that shows up in the upper right. Then click “Add Link”. (shown below) and

From the next screen choose the Page Anchor Link option

Next you'll see a list of all the pages that have anchors, and the anchors on each of those pages. Select the one you want to link to.

Once you're done, click save and close!

Did this answer your question?