Materialize/doc/user/layouts/partials/toc.html

<aside class="toc-wrapper">
  <a href="https://materialize.com/s/chat" class="btn-ghost"
    ><svg
      width="21"
      height="21"
      viewBox="0 0 21 21"
      fill="currentColor"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M4.31717 13.238C4.31717 14.4012 3.37517 15.3432 2.21199 15.3432C1.04881 15.3432 0.106812 14.4012 0.106812 13.238C0.106812 12.0748 1.04881 11.1328 2.21199 11.1328H4.31717V13.238Z"
      ></path>
      <path
        d="M5.37042 13.238C5.37042 12.0748 6.31242 11.1328 7.4756 11.1328C8.63878 11.1328 9.58078 12.0748 9.58078 13.238V18.5017C9.58078 19.6649 8.63878 20.6069 7.4756 20.6069C6.31242 20.6069 5.37042 19.6649 5.37042 18.5017V13.238Z"
      ></path>
      <path
        d="M7.4756 4.81729C6.31242 4.81729 5.37042 3.87529 5.37042 2.71211C5.37042 1.54893 6.31242 0.606934 7.4756 0.606934C8.63878 0.606934 9.58078 1.54893 9.58078 2.71211V4.81729H7.4756Z"
      ></path>
      <path
        d="M7.47574 5.87061C8.63891 5.87061 9.58091 6.81261 9.58091 7.97578C9.58091 9.13896 8.63891 10.081 7.47574 10.081H2.21199C1.04881 10.081 0.106812 9.13737 0.106812 7.97578C0.106812 6.8142 1.04881 5.87061 2.21199 5.87061H7.47574Z"
      ></path>
      <path
        d="M15.8955 7.97578C15.8955 6.81261 16.8375 5.87061 18.0007 5.87061C19.1639 5.87061 20.1059 6.81261 20.1059 7.97578C20.1059 9.13896 19.1639 10.081 18.0007 10.081H15.8955V7.97578Z"
      ></path>
      <path
        d="M14.8423 7.97586C14.8423 9.13904 13.9003 10.081 12.7372 10.081C11.574 10.081 10.632 9.13904 10.632 7.97586V2.71211C10.632 1.54893 11.574 0.606934 12.7372 0.606934C13.9003 0.606934 14.8423 1.54893 14.8423 2.71211V7.97586Z"
      ></path>
      <path
        d="M12.7371 16.3967C13.9003 16.3967 14.8423 17.3387 14.8423 18.5019C14.8423 19.6651 13.9003 20.6071 12.7371 20.6071C11.574 20.6071 10.632 19.6651 10.632 18.5019V16.3967H12.7371Z"
      ></path>
      <path
        d="M12.7372 15.3432C11.574 15.3432 10.632 14.4012 10.632 13.238C10.632 12.0748 11.574 11.1328 12.7372 11.1328H18.0009C19.1641 11.1328 20.1061 12.0748 20.1061 13.238C20.1061 14.4012 19.1641 15.3432 18.0009 15.3432H12.7372Z"
      ></path></svg
    >Join The Community</a
  >
  {{ if not (.Params.disable_toc) }}
  <div class="toc">
    <h2 class="gradient_text dark">On this page</h2>
    {{ .TableOfContents }}
  </div>
  {{end}}
</aside>

<script>
  // A custom "scrollspy" plugin that highlights the TOC link for the
  // currently-visible section.

  /// Computes the absolute offset of each heading from the top of the page.
  /// Offsets are massaged so that headings beyond the maximum scroll offset
  /// of the page are reassigned a reasonable and unique offset within the
  /// page's scroll boundaries. This makes it possible to distinguish headings
  /// that would otherwise all require scrolling to the very end of the
  /// viewport.

  /// The header now has a fixed position. The _base.scss defines header height.

  function headingOffsets() {
    const SLOP = 100;
    const headings = $(".content h2, .content h3");
    let offsets = headings.toArray().map((h) => ({
      id: h.id,
      offset: h.offsetTop - 65,  // 75 if banner is displayed, 65 otherwise
    }));
    const cutoff = $(document).height() - $(window).height() - SLOP;
    const firstBad = offsets.findIndex((o) => o.offset > cutoff);

    if (firstBad === -1 || firstBad === offsets.length - 1) return offsets;
    const allotment = SLOP / (offsets.length - firstBad);
    for (var i = firstBad; i < offsets.length; i++)
      offsets[i].offset = cutoff + (i - firstBad + 1) * allotment;
    return offsets;
  }

  // Update the active TOC link on every scroll event.
  $(window).scroll(() => {
    const scroll = $(window).scrollTop();
    const offsets = headingOffsets();
    let activeId = null;
    if (offsets.length > 0 ) {
      activeId = scroll == 0 ? null : offsets[offsets.length - 1].id;
    }

    for (let i = 0; i < offsets.length && scroll > 0 ; i++) {
      if (offsets[i].offset > scroll) {
        activeId = offsets[i].id;
        break;
      }
    }
    $(".toc .active").removeClass("active");
    if (activeId) $(`.toc [href="#${activeId}"]`).addClass("active");
  });

  // Scroll to our massaged offsets on a hashchange event, to override the
  // browser's automatic scroll to the unmassaged offset.
  $(window).on("hashchange", function () {
   $(window).trigger("scroll");
  });

  // Trigger an initial hash change event to handle scrolling to the page's
  // initial hash.
  $(() => $(window).trigger("hashchange"));

  // Prevent double clicking on a TOC link from scrolling the page if we're
  // already on that TOC link's section, as we won't get a hashchange event
  // to fix up the scroll offset.
  $(".toc a").click(function (e) {
    console.log($(this).attr("href"), window.location.hash);
    if ($(this).attr("href") == window.location.hash) e.preventDefault();
  });
</script>