Table of Contents
Settings controls
Smooth scroll: if enabled, smooth scroll behavior will be included at your site. This means, to reproduce a smooth scroll when clicking an anchor redirecting to the same page. More info here.
Content selector: determines the element from where the table of contents will get it’s heading selectors.
Heading selector: determines the tag of the elements that will be included at Table of contents. You can also set ids and class selectors, and combine them all by separating with commas. e.g: h2, #my-heading, .toc-heading
Ignore selector: if there is an element that mees the conditions at the Heading selector but it shouldn’t be included at Table of contents then you can select it here by it’s tag, id or class.
Scroll toggle: determines when the next heading will be toggled at Table of contents when it comes into view: from center or from top.
Offset: determines the heading’s top distance to leave when clicking on an anchor at the table of contents.
Outline controls
There is an outline animation at the Headings when clicking their anchor at Table of contents. It’s styles and animation duration can be customized at this section.
Style controls
Table of contents styles can be customized at this section.
Sticky: if enabled, Table of contents will become sticky. You will have to set a relative position at the parent it has to stick to.
Top: determines Sticky top distance. Requires Sticky to be enabled.
Targets style controls
Table of contents anchors styles can be customized at this section. Each anchor has a left outline when it’s target is active (selected line). It can be also styled here.
Responsive controls
If Responsive is enabled, Table of contents will collapse at the media breakpoint selected, converting into a dropdown.
The dropdown will have 3 animations: arrow, dropdown and text swap animations. Their properties, animation duration and easing can be customized at pleasure.
– Tamu