Scroll JS
import Scroll from "@natachah/vanilla-frontend/js/_scroll"Syntax
The scroll component make you able to add some <button> to go on the top or bottom of an element.
It also make you able to spy on a <nav> to automatically set the current attribute on links when scrolling.
1) Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in dolore exercitationem, quibusdam repellat perspiciatis qui deleniti commodi reiciendis provident dolorem libero velit, ipsam inventore laudantium, maxime repudiandae minima. Sunt? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in dolore exercitationem, quibusdam repellat perspiciatis qui deleniti commodi reiciendis provident dolorem libero velit, ipsam inventore laudantium, maxime repudiandae minima. Sunt? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in dolore exercitationem, quibusdam repellat perspiciatis qui deleniti commodi reiciendis provident dolorem libero velit, ipsam inventore laudantium, maxime repudiandae minima. Sunt?
2) Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas. Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.
3) Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.
WARNING
To work on the <body>, you must passed the document.documentElement as parameter.
<nav id="demoScrollNav">
<ul class="list">
<li><a role="button" href="#target1" aria-current="location">One</a></li>
<li><a role="button" href="#target2">Two</a></li>
<li><a role="button" href="#target3">Three</a></li>
<li><button data-scroll-bottom="demoScrollSpy">Scroll to the bottom</button></li>
<li><button data-scroll-top="demoScrollSpy">Scroll to the top</button></li>
</ul>
</nav>
<div id="demoScrollSpy" style="height: 150px; overflow-y: scroll; position: relative">
<div>
<p id="target1">1) Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in dolore exercitationem, quibusdam repellat perspiciatis qui deleniti commodi reiciendis provident dolorem libero velit, ipsam inventore laudantium, maxime repudiandae minima. Sunt? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in dolore exercitationem, quibusdam repellat perspiciatis qui deleniti commodi reiciendis provident dolorem libero velit, ipsam inventore laudantium, maxime repudiandae minima. Sunt? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in dolore exercitationem, quibusdam repellat perspiciatis qui deleniti commodi reiciendis provident dolorem libero velit, ipsam inventore laudantium, maxime repudiandae minima. Sunt?</p>
<p id="target2">2) Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas. Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.</p>
<p id="target3">3) Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.</p>
</div>
</div>import Scroll from "@natachah/vanilla-frontend/js/_scroll"
const scrollSpy = document.getElementById('demoScrollSpy')
if (scrollSpy) {
new Scroll(scrollSpy,{
navigation: 'demoScrollNav'
})
}Javascript
Options
| Name | Description | Value |
|---|---|---|
| behavior | The scroll behavior | smooth as string can be auto, smooth or instant |
| navigation | The id of the navigation to spy | NULL or a string |
| gaps.top | The distance when to toggle the go top button | 100 as number |
| gaps.bottom | The distance when to toggle the go bottom button | 100 as number |
| gaps.spy | The distance when change the navigation current | 100 as number |
new Scroll(myElement,{
behavior: 'smooth'
navigation: 'scrollNav',
gaps: {
top: 200,
bottom: 200,
spy: 100
}
})Methods
| Method | Description |
|---|---|
| goTo(distance) | This method will go to a specific position |
| scrollTop() | This method will go to the top of the element |
| scrollBottom() | This method will go to the bottom of the element |