Hi guys, welcome to this repository. I created a light-weight Scroll Spy library that you could fully customize with CSS. It's usage is really easy.
Let's see how we can use it.
Install it by using one of these commands:
npm:
npm install --save @webpg/scroll-spy
yarn:
yarn add @webpg/scroll-spy
For navigation links just add data-wp-link
attribute to any html element you want.
and for HTML element that you wnat to scroll to it, add data-wg-section
attribute.
Note:
data-wp-link
prop must start with#
, like#something
.
<div>
<span data-wg-link="#section-one">section one</span> |
<span data-wg-link="#section-two">section two</span> |
<span data-wg-link="#section-three">section three</span> |
<span data-wg-link="#section-foure">section-foure</span> |
<span data-wg-link="#section-five">section-five</span>
</div>
<section
data-wg-section="section-one"
style="background-color: #2a9d8f"></section>
<section
data-wg-section="section-two"
style="background-color: #e9c46a"></section>
<section
data-wg-section="section-three"
style="background-color: #e76f51"></section>
<section
data-wg-section="section-foure"
style="background-color: #264653"></section>
<section
data-wg-section="section-five"
style="background-color: #f4a261"></section>
At last, in your JS file, just import the ScrollSpy
class and instantiate it.
import { ScrollSpy } from "@webpg/scroll-spy"
new ScrollSpy()
If you want to change the scroll animation duration, just pass the duration time you want as an argument to ScrollSpy()
like this:
new ScrollSpy(7000) // Now animation takes 7s for execution time.