Skip to main content
On this page

Smart Auto TOC (Table of Contents)

The Auto TOC (Smart Table of Contents) feature of the TanaFlows theme is a unique navigation assistant that turns reading long articles on your blog into an enjoyable, professional, and smooth experience.

Instead of a rigid, static block of table of contents at the top of the page, TanaFlows’ Auto TOC operates as an incredibly smart “Floating Navigation Pill”.

🌟 Key Benefits for Readers (UX)

  • Know Exactly Where You Are: As you scroll through the article, the text on the “pill” automatically updates with a smooth slide up/down animation to display the heading of the section you are currently reading.
  • Visual Reading Progress: A dynamic radial progress bar surrounds the TOC button. The circle fills up based on your scroll position, showing you exactly how much of the article you’ve completed.
  • Jump Instantly to Key Sections: Click the floating pill to open a beautiful list of headings. Clicking any section smooth-scrolls you directly to that content without jumping or sudden shifts.
  • Intelligent, Non-Intrusive Design:
    • The TOC pill only appears after scrolling past the introduction and automatically hides when reaching the footer area, freeing up screen space to interact with comments or related posts.
    • If an article is short (fewer than 2 main headings), the TOC automatically remains hidden.
    • For very long articles, the menu automatically collapses (showing only H2 headings) to keep the list clean and organized.

⚙️ How It Works (Simplified)

To deliver these benefits, the background engine processes complex tasks efficiently:

  1. Automated Scanning: When an article loads, the system scans the content for main headings (H2 and H3) and builds the navigation menu instantly.
  2. Smart Intersection Observer: Instead of constantly calculating scroll offsets (which drains battery and causes lag), the theme uses browser sensors to detect when a heading enters the viewport and updates the pill label.
  3. Sticky Menu Offsets: When you click a TOC item, the page scrolls to that section while leaving a comfortable top offset (20px on mobile, 100px on desktop) so headings are never covered by the sticky site header.
  4. Micro-interactions: On desktop, hovering over the TOC pill triggers a subtle light glow effect that follows your cursor, delivering a premium and interactive feel.