Section Links within CMS Rich Text Block

I’m planning my site and want to know if I can include a sticky sidebar with section links on a CMS Collection Page template. The section links would link to different sections within a single rich text block from the CMS Item.

Similar to Webflow’s own Article collection page template which allows links with anchor tags direct to content within the article:

I recently asked some people about this and you can’t do it without custom code. If you search the forums you’ll find some custom code solutions but YMMV. I personally haven’t found a good way to do it.

um, I am searching the forums, where’s the custom code solution? and why can’t we just do this by click int the heading and adding an id?

1 Like


I wrote a small script to assign id’s to H3 headings.

Follow the below steps.

  1. Replace “blog-content” with your richtext class. And Replace H3 to your preferred Headings.
  2. Paste the script in your blog templates body code.(before </body>)
  3. Then just link your Link-text to #1, #2, #3…(since now, id’s are 1,2,3… for your headings)

Hope this helps.

Happy Designing. :slight_smile:

2 Likes

Oof, thanks for posting this @Sai_Abhijith! I tried this in my project and it’s not working. Double-checked all the code (pasted below) and made sure my RTE was named properly and all titles were tagged as H4s and changed it to H4 in the code … What am I doing wrong here? Thanks for any guidance anyone can give!

Here’s a quick walkthrough video to show you the lay of the land:

Here’s my code that I transcribed from the screenshot:

<script>
//Select all H3 headings that are subset of class "blog-content" and name the set as sections
const sections=document.querySelectorAll(".articles-rte > H4");

//For each element in sections, set an id numerically starting from 1.
sections.forEach((section,i) => {
	sections[i].id=`${i+1}`;
});

</script>

Hey @adiggy, I don’t think there is any mistake. The page is not scrolling because, the section is already in the visible area. Try linking to a heading which is out of page(I mean instead of #2, try #5 or #6). Let me know if you still face an issue.

Thanks for the reply, @Sai_Abhijith! I did what you said and am having the same problem, unfortunately. :confused: At the top of the RTE here, you’ll see text links for #5 and #6 at the top:
https://davincied.webflow.io/resources/new-releases#6

1 Like

Could you try placing the code in body section. In Before </body> input.

That worked, that worked! Oh you rock, Sai! Thank you so much for your guidance with this.
https://davincied.webflow.io/resources/new-releases#6

1 Like

Thanks a lot for raising the issue back in the forum. :grinning:

WORKING EXAMPLE: HERE

Step 1: add HTML Embed Code into your CMS item

image

Step 2: Insert code:

<a href=“#Section-INSERT_YOUR_SECTION_NAME_“class””>INSERT TEXT

Code example: 3 - Requirements

“#Section-requirements” - is your class ID - This ID will be used in the second code.
You can re-name.

The end result is - text with underline (link) that’s saying 3 - requirements

Step 3 - add HTML Embed Code into your CMS item (this will make the “automatic” scroll into your section.

Step 4 - insert code

Code example:

this will work too with a native use of HTML

1 Like

Man, this is awesome! You saved my neck on this. Also thanks to @adiggy for the tries and video! Works perfectly!

Sometimes your jump link will be obscured by your nav bar. This fixes that issue

Replace insert-your-id-here with the title of your link.

So you could do

id=features and then in your URL, do https://your-website.com/#features

<div style="position:relative;"  >
<div style="position:absolute; margin-top: -160px;" id="insert-your-id-here" ></div>
</div>```

Step 1. Add this in CMS Rich Text field

<span id="sectionName"> </span>

Step 2. Use #sectionName as URL