The easiest way to implement scroll anchors

The library provides a simple and reusable solution for creating scroll anchors and carousels.

Demo

Installation

npm install @ritox/scroll-manager

Usage

Add the rtxScrollManager directive to the container element. Add the rtxScrollSection directive to element you want to scroll to. Add the rtxScrollAnchor directive to element you want to click on in order to trigger a scroll event.

<main rtxScrollManager>
    <nav>
      <button rtxScrollAnchor="A-H">First Article</button>
      <button rtxScrollAnchor="B-H">Second Article</button>
      <button rtxScrollAnchor="C-H">Third Article</button>
      <button rtxScrollAnchor="D-H">Forth Article</button>
    </nav>

    <div>
      <article rtxScrollSection="A-H">
        <!--some content-->
      </article>

      <article rtxScrollSection="B-H">
        <!--some content-->
      </article>

      <article rtxScrollSection="C-H">
        <!--some content-->
      </article>

      <article rtxScrollSection="D-H">
        <!--some content-->
      </article>
    </div>
</main>

With this setup, we defined anchors using rtxScrollAnchor and passing to it a unique id. We add rtxScrollAnchor to the desired scrollable elements and pass the exact unique id as for the corresponding anchor.

rtxScrollManager Definition

rtxScrollOptions

Allow you to pass ScrollIntoViewOptions that will be used by scroll-manager lib. The defaults are: {   behavior: 'smooth',   block: 'end',   inline: 'nearest', }

rtxScrollSection Definition

rtxScrollSection

A unique id for identifying the corresponding anchor.

rtxScrollOptions

Allows you to override the ScrollIntoViewOptions inherit values for this specific section.

rtxScrollAnchor Definition

rtxScrollAnchor

A unique id for identifying the corresponding scroll section.

Browser Support

Supports all modern browsers.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!