[TUTORIAL] Dynamic Table of Contents on Webflow CMS (no plugins, automatic)

[guadster (patrick mayr)]

Hey, is it possible to make the ToC in an ordered list?

[Cpineda23 (Cristian Pineda)]

@aaro This is great thanks for putting this together., one question how can I go in to offset the Y-axis scroll?

Right now when I click on the ToC Items the site scrolls past the H2 for me.

Here’s a link to the inprogress blog post

[DuncanHamra (from Memberstack)]

Hey Sam Debugging stuff like this can get complicated… if it’s not too late, I recommend cloning the project above and copying the required components into your site. If you test it each time you make a change, I guarantee you’ll get to the finish line. Good luck!

[DuncanHamra (from Memberstack)]

I’ve had this same issue. Checkout these posts for solutions…

Customize Webflow Scrolling Offset

Hi! I’m looking for solution for dynamic change of scroll offset when select section from navbar. Now I have navbar that initial appearance is 100px but after hero section it changes to 60px. When I want to navigate to other section from hero part scroll offset is set to 100px even when navbar size has changed to 60px leaving 40px space. I know about custom attributes like data-scroll-time or center a section with data-scroll but maybe there is something likedata-scroll-offset? Any ideas? T…

Setting scroll offset with sticky navbar

Hi everyone, I’m having trouble setting the scroll offset on my page with my sticky navbar. I thought that normally, when the navbar is fixed, the offset is set to the height of the navbar automatically (correct me if I’m wrong) but since I’m using “position:sticky” it doesn’t work anymore. To be more specific: I need to link to some H3-headings on my site and the content will always be hidden behind by sticky navbar. The only solution I could think of is setting a margin-top to my headings, b…

[zellet (Zac Elletson)]

@aaro Hey Aaro, love this tutorial! , but having a really weird issue with h2, h3, &h4 classes on a duplicate CMS template - an exact duplicate…

The first CMS collection works as expected…

But the second CMS collection does this…

It look like the observer is not adding/replacing the class?? Any suggestions or ideas?

Read only link

Good CMS collection link

Problem CMS collection link

I’m stumped, someone help please

[zellet (Zac Elletson)]

@DuncanHamra Your solution is great! The only issue I have is that it doesn’t have the logic or classes to indent the ToC items based on Heading size like the Flowrite example. Is there a good reason you didn’t implement this? I ask because I’m having issues with the original implementation, but only on 1 page… I posted my issue

[DuncanHamra (from Memberstack)]

I went with the more simple implementation for the sake of speed/ease of use. For that reason, I think I left out some code that was required for the more complex setup… although I’m sorry to say I don’t remember which code This week is pretty crazy, so I don’t be able to dedicate much time here

[ITryMyBest]

Hi and thanks for making it clonable

sorry for that question but how did you paste your code in webflow?

[Payal_Bhansali]

Is their a way to generate the same table twice on the sampage?

[Payal_Bhansali]

Is their a way to generate same table twice?

[jfiche]

I have a question, first things first. Great implementation, this feature was a great added value to our website, thank you!

My question now, how can I increase the offset in the anchor when I click in a heading from the table of contents and the page is scrolled to that element? I ask that because I have a sticky header, and when I click in a heading from the blog, it is not showing because it is under the sticky header.

Cheers.

[DuncanHamra (from Memberstack)]

Great question! The easiest way that I have found is to:

1. Select one of your blog headings that you want to be an anchor.
2. Give that element some top padding equal to the height of your sticky nav. Let’s say 100px for the sake of example.
3. And also give it a negative margin of 100px.

This will move the top of the element 100px up the page while not disrupting your spacing.

Publish and you’re good to go!

[DuncanHamra (from Memberstack)]

Sorry I missed your question! I’m not sure how to generate the same table twice. I feel confident it can be done by a developer, but I’m not sure how to do it myself.

[Melanie12 (Mélanie Lebrun)]

This tuto is just brillant ! A little complicated at first but the result is perfect.
I have a question about the links that are created with this table of contents, does Google index them and how to manage them from an SEO point of view?
Thanks a lot

[webdev (Jeff Selser)]

@Melanie12 - Google does not index named anchor links since they are only relative to the page and are not internal nor external links. They are factored (the headings) in the on-page SEO and may at Google’s discretion show up in the SERP snippet when used in a table of contents scenario if it is relevant.

[Melanie12 (Mélanie Lebrun)]

Thanks for your reply @webdev . I’ve waited a while and now I’ve got lots of urls of this type in my search console.
I don’t know how to deal with the problem.