Adding anchor links to a rich text block

Community resources Show & Tell
1

I’ve created a clonable project to show a way to add anchor links in a rich text block thanks to the updates to the RTE block.

Take a look at the project here: https://rich-text-anchor-links.webflow.io/.

image
image1600×789 86 KB

image
image1600×789 102 KB

7 Likes
2

Thanks for that Sarah. This is quite useful to know!
(Maybe add some padding to the bottom of your example page? The scrolling works good on a screen with little height but on a larger monitor the scroll gets caught very quickly and doesn’t scroll down to the lower tag>)

Cheers
Grant
3

@grantsenior I’ll take a look and see what you mean. This was a really quick prototype I put together to show the concept so I didn’t look at different screensizes etc.

4

For some reason, this isn’t working in my rich text field in the CMS. Anyone else having issues?

1 Like
5

Yes. I couldn’t get it to work either with my CMS collection.

6

Same here doesn’t work on the CMS.

7

For anyone who is trying to make an anchor target, rather than a link to an anchor, you can adjust Sarah’s code as follows;

Use name rather than href, and remove the #.

I would generally place that HTML Embed just before a title line, so that the title itself is still editable in the RTE, so the code inside the embed would just be;

<a name="example"></a>

Now you can link to it as /my-page#example

It doesn’t matter if the content is from the CMS.

If you need this kind of think frequently, these two tools will add on a lot of capability to your RTE;