Floating Table of Contents Generator

Customize the appearance and behavior of the floating TOC, then copy the generated code snippet to add it to your website.

You will also need to download the core CSS and JS files and host them on your server.

Download CSS Download JS

Configuration Options

Heading Levels

Select the heading tags (h1-h6) to include in the TOC.

Appearance
Leave empty to hide the title bar.
e.g., '300px', '280px'
0.9
e.g., '50%' (circle), '10px', '0' (square)
Behavior
Pixels to offset scroll position (for fixed headers).

Live Preview

(Button appearance is updated live)

Generated Code Snippet

1. Make sure you have downloaded floating-toc.css and floating-toc.js and uploaded them to your website.

2. Copy the code below and paste it into your HTML file just before the closing </body> tag.

3. **Important:** Update the `href` and `src` paths in the snippet to point to the correct location where you uploaded the CSS and JS files on your server.

Contact

Ready to get started?

Thank you for considering Kalyxo for your web development needs. Contact us with any questions or to discuss your project.

Use the form below, or give us a ☎️ call: (619) 259-0530