How to create Dynamic Table of content for CMS blog posts?

Hello! As of right now, it seems like the only way to create an anchor tag to go to a specific section of a website is by adding an ID to a section.

But in my case, I have blog posts where the body of the blog are paragraphs. I’d like to add anchor links to go to a specific paragraph in my blog posts, without using ID’s and creating sections.

Is there anyway to do this? I’m DESPERATE for a solution!

No way to create anchors…without anchors :slight_smile: (Added manually -or- by code).


For dynamic TOC (table of content) you should use js/jquery plugins.

Like this one (google it):


The toc created from heading (h1-h6) not from <p> (Like microsoft word TOC).

By JS you could loop throw all <p> in article X and add manually anchor for each <p> - one way:

HTML DOM setAttribute() Method

Anyway - give more detials (Your Q - little general).

1 Like

Check out this screen shot:

As you can see, I have multiple titles within a blog post, under one collection field as “Full Article Text”.

For this post, I have North Miami, Central Miami, and South Miami.

I’m trying to create an anchor link, or URL, that could go to a specific paragraph within my blog posts.

So something like would go straight to the North Miami paragraph in my blog post.

But I need to do this without creating sections and dividing my blog posts. I’ve done it for my review section, check it out here:

But for my articles, this layout will not work as each blog post is different.

Is there anyway for me to create these type of anchor links without sections and ID’s, which is the traditional way in webflow?

I believe it would look something like this: <h2 id="north-miami">North Miami</h2> which is not currently possible within a collection field :frowning:

Again you should use jquery plugin (Mark all h2 and create anchor). The anchor in this plugins is the heading text

1 Like

Okay, sounds good! Would you be kind enough to explain how I implement this plugin in Webflow? <3

In general, this is more for a freelancer job (No way to teach you basic JS by forum Q).

but try this:

The JS side

1. add javascript before body (copy-paste)

     * toc - jQuery Table of Contents Plugin
     * v0.3.2
     * copyright Greg Allen 2014
     * MIT License
    !function(a){a.fn.smoothScroller=function(b){b=a.extend({},a.fn.smoothScroller.defaults,b);var c=a(this);return a(b.scrollEl).animate({scrollTop:c.offset().top-a(b.scrollEl).offset().top-b.offset},b.speed,b.ease,function(){var a=c.attr("id");a.length&&(history.pushState?history.pushState(null,null,"#"+a):document.location.hash=a),c.trigger("smoothScrollerComplete")}),this},a.fn.smoothScroller.defaults={speed:400,ease:"swing",scrollEl:"body,html",offset:0},a("body").on("click","[data-smoothscroller]",function(b){b.preventDefault();var c=a(this).attr("href");0===c.indexOf("#")&&a(c).smoothScroller()})}(jQuery),function(a){var b={};a.fn.toc=function(b){var c,d=this,e=a.extend({},jQuery.fn.toc.defaults,b),f=a(e.container),g=a(e.selectors,f),h=[],i=e.activeClass,j=function(b,c){if(e.smoothScrolling&&"function"==typeof e.smoothScrolling){b.preventDefault();var f=a("href");e.smoothScrolling(f,e,c)}a("li",d).removeClass(i),a(},k=function(){c&&clearTimeout(c),c=setTimeout(function(){for(var b,c=a(window).scrollTop(),f=Number.MAX_VALUE,g=0,j=0,k=h.length;k>j;j++){var l=Math.abs(h[j]-c);f>l&&(g=j,f=l)}a("li",d).removeClass(i),b=a("li:eq("+g+")",d).addClass(i),e.onHighlight(b)},50)};return e.highlightOnScroll&&(a(window).bind("scroll",k),k()),this.each(function(){var b=a(this),c=a(e.listType);g.each(function(d,f){var g=a(f);h.push(g.offset().top-e.highlightOffset);var i=e.anchorName(d,f,e.prefix);if(!==i){a("<span/>").attr("id",i).insertBefore(g)}var l=a("<a/>").text(e.headerText(d,f,g)).attr("href","#"+i).bind("click",function(c){a(window).unbind("scroll",k),j(c,function(){a(window).bind("scroll",k)}),b.trigger("selected",a(this).attr("href"))}),m=a("<li/>").addClass(e.itemClass(d,f,g,e.prefix)).append(l);c.append(m)}),b.html(c)})},jQuery.fn.toc.defaults={container:"body",listType:"<ul/>",selectors:"h1,h2,h3",smoothScrolling:function(b,c,d){a(b).smoothScroller({offset:c.scrollToOffset}).on("smoothScrollerComplete",function(){d()})},scrollToOffset:0,prefix:"toc",activeClass:"toc-active",onHighlight:function(){},highlightOnScroll:!0,highlightOffset:100,anchorName:function(c,d,e){if(;var f=a(d).text().replace(/[^a-z0-9]/gi," ").replace(/\s+/g,"-").toLowerCase();if(b[f]){for(var g=2;b[f+g];)g++;f=f+"-"+g}return b[f]=!0,e+"-"+f},headerText:function(a,b,c){return c.text()},itemClass:function(a,b,c,d){return d+"-"+c[0].tagName.toLowerCase()}}}(jQuery);

2 - initialize toc

Important the .toc is the selector (read her).

copy paste after the code from step 1:
/* initialize */
        'selectors': 'h1,h2,h3', //elements to use as headings
        'container': 'article', //element to find all selectors in
        'smoothScrolling': true, //enable or disable smooth scrolling on click
        'prefix': 'toc', //prefix for anchor tags and class names
        'highlightOnScroll': true, //add class to heading that is currently in focus
        'highlightOffset': 100, //offset to trigger the next headline   

Webflow side

1. collection page --> Add empty div --> add toc class for this div (The plugin generate the TOC her).

why .toc? match this:

Use css display: none; and hide this div (If you only need the anchors tags)

2. Change the blog post wrapper to article

Why - this is the JS element in the code:

'container': 'article', //element to find all selectors in


Live example:

Your anchor?

For heading “hello world” the id is:


— Try this steps — Than add live url + read only link —


Thank you so much for your reply! I’m having trouble making it work. See below.

  1. Added JS before body

  2. Added empty div with the class “toc”


  3. Changed article container to class “article”

Am I missing something?

Here is my site:
Read only:

Not .article class but article element (HTML5 element)


Change this and test again.

You are the man! THANK YOU SO MUCH!!!

1 Like

Great. Mark as solved (the answer start with “In general” to close this topic :slight_smile: you welcome

Thanks so much for answering this @Siton_Systems, it was so helpful!

1 Like

Hey @Siton_Systems. Thanks for the solution. There is a minor issue that I have been facing. Everything works well when the page loads and I scroll. But, when I click on any link inside the Table of Content, and then again start scrolling the page, the Table of Content will not highlight the active link. It will keep on highlighting the clicked one.