Table of Contents

Ajax Load More offers a Table of Contents component that dynamically generates anchor navigation links for each page loaded via Ajax. When a user clicks an anchor link they scrolled to the top of the page.

The Table of Contents component is supported for use in core Ajax Load More and the Filters, SEO and Single Posts add-ons.

Enable the Table of Contents component by simply adding the following HTML element to a WordPress template or page.

Note: Table of Contents can only be used when a single instance of Ajax Load More is present and is not yet compatible with the Next Page or Cache add-on.

Adding the HTML

The HTML snippet can be added to your page anywhere you like. If Ajax Load More is able to locate the element, it will render the anchor navigation.

🔥 Pro Tip: Use the alm_before_button filter hook to inject the navigation directly into the Ajax Load More listing.

CSS Styling

Ajax Load More is purposely unopinionated when it comes to the CSS styling of the Table of Contents buttons. The majority of users will use this functionality in a sticky sidebar floating navigation situation and can easily style the component to fit their needs.

Below is generated markup of an active anchor navigation.

Scroll Offset

By default, the Table of Contents component will scroll the user to 30px from the top of the browser window on button click. This can be adjusted by setting the data-offset attribute of the html element.

JavaScript Hooks

The following functions are available to modify the Table of Contents display.


The almTOCLabel function will allow for customization of the button label by Ajax Load More instance ID.