Reza, and the case for standing still
Reza asked what he should do with his hands. The honest answer is nothing, and it takes about half an hour to believe it.
Long-form content is one of the most effective ways to establish topical authority and drive organic search traffic. But without proper navigation, readers land on a wall of text and bounce before they find what they came for. The Sky Addons Table of Contents extension automatically generates a navigable, stylable contents list from page headings, actively tracking and highlighting the section currently in view.
Sky Addons scans the page heading structure on load and builds the list programmatically from H2 through H6 headings. The display can be filtered to specific heading levels — H2 and H3 for a concise overview, or all levels for technical documentation. This flexibility means the same extension serves equally well for blog posts, knowledge base articles, and comprehensive product guides without manual maintenance when content changes.
The smooth scroll implementation is deliberately custom rather than relying on browser-native anchor scrolling. This allows a configurable pixel offset so that fixed headers or sticky navigation bars do not obscure the target heading when the scroll completes. The offset value applies consistently across all anchor links on the page regardless of how many headings appear, solving the common problem where anchor links disappear behind sticky elements.
As the reader scrolls, the table of contents updates in real time to highlight the current section using Intersection Observer for performance. The active state — typically a colour change or weight increase — transitions smoothly between items as the reader moves down, providing constant orientation within lengthy content. The scroll spy correctly identifies heading text even when text animation effects are applied, preventing the common bug where animated headings are skipped by the scroll tracker.
Each instance tracks only its own scoped container, configured through the parent selector setting. A page with both a main article and a sidebar FAQ section can have two independent tables of contents that do not interfere with each other’s scroll spy or active state. This is particularly valuable for template pages built with Sky Addons Loop Carousel where each carousel item represents a distinct content section.
Links colour, hover colour, typography family, size, weight, and spacing are all adjustable through Elementor’s control panel. Container background, padding, border radius, and shadow ensure the widget matches any design system without custom CSS. On dark card backgrounds, the links colour controls ensure readability against the contrasting background — a common pain point with third-party table of contents plugins that default to unreadable colour combinations.
Search engine bots follow the same anchor links users click, understanding page structure at a glance. Rank Math or Yoast can generate structured data markup from the table of contents, surfacing it directly in search results as a featured snippet — giving pages a competitive edge in rich results and increasing click-through rates from search engine results pages.
Comments are closed.