How to add anchor links to a Builder page

[maddy]

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 “HTML 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.

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:

html {
  scroll-behavior: smooth;
}

[korey]

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();
  }
});

[lukeh]

Hi this is working fine on chrome but not safari.

[cedson]

I’m trying to use the anchor tags myself to link to an accordion drop down (body) text. It won’t work if I link to that(assuming since the state isn’t ‘true’ to open the accordion), so I tried linking to the accordion header. When I do that, it brings it down below the anchor point, where I used the id. Any ideas of how to fix?

Builder.io: Drag & Drop Headless CMS

The images below show the link and the point it should take it to within the same page (just lower down).

[nicke920]

Hi there,

The reason adding anchor tags inside of the accordion isn’t recommended is because when the accordion content is closed, that element isn’t on the actual page, so the browser doesn’t know where to scroll to.

I may suggest to add a box around the accordion and add the ID to this box. Would you be able to give this a try?

We’d also love to take a look but like your space is behind a privacy wall. Would you be able to provide us with the credentials to view your space?

[cedson]

Hi @nicke920 , I ended up adding the anchor tag to the column div that encased the accordion. It worked but it obviously won’t open up the accordion to reveal the selected accordion title. It also reloads the page.

Is it possible to 1) Not have the link reload the page, and scroll down smoothly? - I tried the recommended CSS technique to have the HTML do a smooth scroll as referenced above, but that didn’t work.

2. is there a way to have the accordion open up to the specified title? In our previous email exchange the privacy info was provided.

Thank you!

Best,

[nicke920]

Hi there,

Thanks for reaching back!

1)To prevent a link from reloading the page before executing any code, you can use the event.preventDefault() method. It seems like smooth scroll doesn’t work as expected within Chrome, so instead we could resolve this issue by adding the below custom jQuery code to the onClick event binding

let theElement = document.getElementById("YOUR_ELEMENT_ID");shop.scrollIntoView({  behavior: 'smooth',  block: 'start',  inline: 'nearest'});

and then the following CSS in the custom CSS + JS section

/** CSS **/
html {
  scroll-behavior: smooth;
  webkit-scroll-behavior: smooth;
  scroll-padding-top: 60px;
}
html:focus-within {
  scroll-behavior: smooth;
  webkit-scroll-behavior: smooth;
}

2. There certainly should! You can look into using some Javascript to identify which link gets clicked on, and based on this, you can use custom code to manually open up the selected accordion title. This would be considered advanced and require coding knowledge, so we’d recommend the use of a developer to implement this.