Scrollspy

Very basic scrollspy implementation that works with the template system and spacing.

<script src="js/cs/scrollspy.js"></script>

var scrollSpy = new ScrollSpy({
  spyDropdownId: 'scrollSpyDropdown',
  spyMenuId: 'scrollSpyMenu'
});

<!-- Scrollspy Content Start -->
<section class="scroll-section" id="content1">
</section>
<section class="scroll-section" id="content2">
</section>
<section class="scroll-section" id="content3">
</section>
<!-- Scrollspy Content End -->

<!-- Scrollspy Mobile Button Start -->
<a href="#" id="scrollSpyButton" class="spy-button" data-bs-toggle="dropdown">
  <i data-acorn-icon="menu-dropdown"></i>
</a>
<!-- Scrollspy Mobile Button End -->

<!-- Scrollspy Mobile Dropdown Start -->
<div class="dropdown-menu dropdown-menu-end" id="scrollSpyDropdown"></div>
<!-- Scrollspy Mobile Dropdown End -->

<!-- Scrollspy Menu Start -->
  <div class="col-md-auto d-none d-lg-block" data-width="250px" id="scrollSpyMenu">
    <ul class="nav flex-column">
      <li>
        <a class="nav-link" href="#content1">
          <i data-acorn-icon="chevron-right"></i>
          <span>Content 1</span>
        </a>
      </li>
      <li>
        <a class="nav-link" href="#content2">
          <i data-acorn-icon="chevron-right"></i>
          <span>Content 2</span>
        </a>
      </li>
      <li>
        <a class="nav-link" href="#content3">
          <i data-acorn-icon="chevron-right"></i>
          <span>Content 3</span>
        </a>
      </li>
    </ul>
  </div>
<!-- Scrollspy Menu End -->

This plugin is initialized in common.js file and it's sources are included in every file. It would be enough to include required files and html. To learn more about this, please see Common.js page .