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 are 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.

Post Listing

Single Post

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

<!-- Renders: [1][2][3] etc... -->
<div class="alm-toc"></div>
HTML

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.

<body>
	<div id="content">		
		<div class="alm-toc"></div>
		<?php echo do_shortcode( '[ajax_load_more ...]' ); ?>		
		<!-- ... the rest of your content -->		
	</div>
</body>
PHP

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

add_filter( 'alm_before_button', function(){
	return '<div class="alm-toc"></div>';
});
PHP

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 the generated markup of an active anchor navigation.

<div class="alm-toc">
   <button type="button" data-page="1">1</button>
   <button type="button" data-page="2">2</button>
   <button type="button" data-page="3">3</button>
   <button type="button" data-page="4">4</button>
   <button type="button" data-page="5">5</button>
</div>
HTML

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.

<div class="alm-toc" data-offset="150"></div>
HTML

JavaScript Hooks

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

almTOCLabel_{id}

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

// [ajax_load_more id="blog"]
window.almTOCLabel_blog = function(page, label){
   return 'Post: ' + label;
}
JavaScript