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
Hi Memetician, can you expand a little on the Refokus Rich Text Enhancer? I also came across this solution but it’s severely lacking in instruction (unless I’m looking in the wrong place). I have pasted the code in my page’s html body section, but I’m not understanding the [#into]Style over Substance! [#intro] under the ID section.
I would like to avoid using custom code for directly linking to each section header within a rich text element if possible.
Thanks for your help!
I haven’t used Refokus on many projects, but make sure your tags match, e.g.
[#intro] some text here [#intro]
That might just be a typo above but I think it would confuse Refokus.
If you’re just trying to create links to your headings, you might look at Finsweet TOC instead, which does that as part of the navigation.
You’ll need to think about what you’re trying to achieve though, if you’re trying to make your headings linkable externally, then you might have a problem creating these with script- since the browser will likely try to navigate before those anchors exist. In that case I’d probably build a second piece which checks the URL for a hash after the links are created and scroll-navigates again.
Thanks for the suggestions, I’ll looking into Finsweet.
My goal is basically to have a summary of sections at the start of a blog post where each bullet point is clickable, connected to anchor points of each subheader.
Would you mind taking a look at my implementation of Fintweet and seeing what I might be missing? Or does the TOC only show on a published site? I unfortunately cannot test any of this on a publish site/staging domain because I have Logic set up and publishing only to staging will break my Logic flow.
I’ve added the script to the head code on this page, and added the custom attribute to the rich text element wrapper. I’m not seeing the TOC populate though.
Thanks for your help
It’s script so it will only appear once you publish. This is one of the reasons I can’t use Logic on projects.
I’ve decided to try to make Refokus work. I am trying to understand how to structure the [#id] parts and where exactly to place them. Below is a screenshot of the only thing I could think of/what I understand, but they are not linked and this doesn’t create any option to link the TOC bullet to the headline. Would love your eyes on it to see if it makes any more sense to you.
These are two different Rich Text elements - the TOC I wrote in the CMS editor and dynamically connected my rich text element to this CMS field.
Here to say that I made this work by deleting the Content Section as a CMS / Rich Text element and instead adding a custom code block where I then wrapped each header as a link to the [#h1], [#h2], [#h3] and so on subheaders in my Rich Text element. Functions perfectly! For anyone who wants to see how this looks, view it at https://www.abbyblue.co/post/15-powerful-detox-supplements-every-biohacker-should-know
