TOC navigation fixed at the bottom of the browser viewport, generated from the TOC within the page right hand sidebar.

Requires that the TOC variant of the anchor links component is placed in the right hand sidebar.

By design, the component will not display if the entire right hand sidebar TOC component is visible in the viewport.

It is recommended that this component is placed in the page__footer region.

A full working example can be found on the Publication Item template.

Example

---

Macro

{{ anchorLinksSticky() }}

---

HTML

<div aria-expanded="false" class="hee-anchorlinks__sticky" id="hee-anchorlinks-sticky">
    <div class="hee-anchorlinks__sticky__wrapper">
      <button aria-haspopup="true" aria-label="Open table of contents" class="hee-anchorlinks__sticky__btn" tabindex="1">
        <span>Table of Contents</span>
      </button>
      <div class="hee-anchorlinks__sticky__container">
        <div class="hee-anchorlinks nhsuk-anchor-links" data-toc-js=true data-headings="">
          <h2 data-anchorlinksignore="true">Table of Contents</h2>
        </div>
      </div>
      <a aria-label="Back to top of page" class="hee-anchorlinks__sticky__top-link" href="#maincontent" tabindex="2">Back to top</a>
    </div>
</div>