Hello,
I have a CMS collection with a rich text item. In that rich text I would like to add anchors to sections (H2, H3 etc…)
Is there a way to do that?
I saw there is an answer about it here CMS rich text - Anchor (URL scroll to section) - #19 by webdev but it doesn’t work…
Would greatly appreciate the help.
There are several ways to do that.
If you’re just wanting to add anchors in a few specific places manually, you can just use an HTML Embed element and drop an anchor in like so;
<div id="section-23"></div>
And then you’ll be able nav there with #section-23.
Position those anywhere you want.
If you’ll be doing this more often, Refokus Rich Text Enhancer lets you add ID’s using bracketed markup;
Finsweet’s PRT allows you to add arbitrary HTML markup in your rich text content;
If you’re trying to automatically ID every heading with a unique ID, so that you can save section-specific links, you can likely find a script for that. The IDs tend to be ugly-ish mashups of the heading text, but you’ll usually find that in scripts that make a table of contents from your text.
You’ll find a few auto-ToC examples here in the forum.
I tried to do exactly as you said and it doesn’t work.
see Intuiface VDP - Vulnerability Disclosure Policy | Intuiface
I’m not trying to automatise anything just add an ID on this particular page.
Thanks for the help @memetican
The name attribute and the ID attribute are not the same. What you want is id="value". See Type, class, and ID selectors - Learn web development | MDN
Thanks Jeff (@webdev )- in the past I’ve always favored <a name> links for fragment navigation, since it avoids polluting the id namespace which I primarily use for scripting.
However I didn’t realize that the name attribute has been deprecated in HTML5.
Webflow’s scripts also don’t recognize them for section navigation, which means no built-in w--current selector, smooth scrolling, or visibility in the available links list.
It creates a very different feel.
https://section-scroll-1ea707-ee7ba5176735f69ef.webflow.io/
@chloecan please change back to using ID’s. It does look like something is interfering with your scrolling nav whichever of the two approaches you use.
Typically that’s due to a duplicate ID, or a script that affects scrolling. It’s possible an interaction could do that as well, though I haven’t actually seen that happen before.
What I’d recommend is, clone your site to a test copy, and then in that clone, selectively remove scripts and interactions until anchor navigation works again.
Thanks for your detailed answer. I’ll try to make it work. I do not have any interactions it’s a rather simple page.
The content is simple, but you have a lot of scripts.
The most common culprits I see are scripts which customize scrolling behavior, and those which do loading effects. Even cookie consent scripts can interfere, if they try to bring navigation to their own pop-up at the moment of page load.
I’m suspicious of your sitesearch360 scripts because they appear to have some sort of loading animation.
But there are plenty of other scripts too… you have jQuery loaded twice, and some form of authentication & routing code happening in the header. You have also have prism & cookie consent scripts running. Lots of possibilities, let us know what you find.
Thanks! Indeed the cookie consent and site search could be the culprit… I"ll check this
