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):
 Gili Yaniv |
This project follows the all-contributors specification. Contributions of any kind welcome!