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 
(Added manually -or- by code).
For dynamic TOC (table of content) you should use js/jquery plugins.
Like this one (google it):
http://projects.jga.me/toc/
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:
Anyway - give more detials (Your Q - little general).
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 Best Homeowners Insurance Rates in Miami 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: Security First Insurance Review 2021
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 
Again you should use jquery plugin (Mark all h2 and create anchor). The anchor in this plugins is the heading text
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:
<script>
/*!
* toc - jQuery Table of Contents Plugin
* v0.3.2
* http://projects.jga.me/toc/
* 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(b.target).attr("href");e.smoothScrolling(f,e,c)}a("li",d).removeClass(i),a(b.target).parent().addClass(i)},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(f.id!==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(d.id.length)return d.id;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);
</script>
Important the .toc is the selector (read her).
<script>
/* initialize */
$('.toc').toc({
'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
});
</script>
toc class for this div (The plugin generate the TOC her).why .toc? match this:
$('.toc').toc({
Use css display: none; and hide this div (If you only need the anchors tags)
Why - this is the JS element in the code:
'container': 'article', //element to find all selectors in
Live example:
For heading “hello world” the id is:
toc-hello-world
— 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.
Added JS before body
Added empty div with the class “toc”
Changed article container to class “article”
Am I missing something?
Here is my site: Best Homeowners Insurance Rates in Miami
Read only: https://preview.webflow.com/preview/homeinsured?preview=374bb3448bb6d09fbc8d9752ef7a30b5
Not .article class but article element (HTML5 element)
Change this and test again.
You are the man! THANK YOU SO MUCH!!!
Great. Mark as solved (the answer start with “In general” to close this topic you welcome
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.
