I have created a script that automates the process of generating a ToC for your Webflow website. It dynamically creates a list of links based on the headings in your content and adds scroll-to functionality. It works with both CMS and static content.
1. Create the empty container where you want to display the ToC and use with the ID "toc".
2. Make sure to structure your content using the appropriate heading tags (e.g., h2, h3, h4). These headings will be utilized to generate the ToC. Ensure that your content is inside an div with the ID "single-article." The tags to be used for the Table of Contents are defined inside the JavaScript code, which you can modify if needed.
3 Cop&paste the CSS and JavaScript code provided in the tutorial. You can find the code in the page settings under the sections 'inside <head>' and 'before </body>'.
4 Publish.
For a detailed tutorial visit this link https://www.pinkdot.design/post/create-a-table-of-contents-toc-in-webflow-in-5-minutes.
0 Comments