Home App Docs Blog Github

How to add anchor links to a Builder page

To create an anchor link on a page, you can:

Give the section you’d like the link to jump to an ID. To add an ID, select the component and navigate to “custom element attributes” at the bottom of the styles tab.

Click “+ new” and select “ID” as the property name, then give this component an ID (this can be anything, but can only contain letters, numbers, dashes, underlines, e.g. my-anchor).

Navigate back to the component that you want to act as the anchor. If this is text, you can highlight the text and click on the link icon. In the link section, enter in the ID name with a pound sign in front of it (e.g. #my-anchor).

Now, when the component is clicked on, it should navigate to the section with an ID.

giphy

If you would like to add smooth scrolling, navigate to the data tab and select “Content JS + CSS”. In the CSS section, paste this styling:

  scroll-behavior: smooth;
}

As a note, if you are not rendering HTML on your server and instead are only rendering the page on the client (JavaScript only), anchor links might not behave as expected. When the browser looks at the html (before JavaScript loads), if it does not find an element with the id you set it will not be able to scroll to anything, since that element does not exist. Once the javascript loads and builds the html, the browser does not re-evaluate the url to scroll the element with the id into view. One way to get around this is to add some javascript that runs once the builder content has been built. You can place this in the custom JavaScript section in the Builder editor. For example:

setTimeout(() => {
  const element = document.getElementById(window.location.hash.replace('#', ''));
  if (element) {
    element.scrollIntoView();
  }
});