Author: | casadelaweb |
---|---|
Views Total: | 1,584 views |
Official Page: | Go to website |
Last Update: | January 13, 2022 |
License: | MIT |
Preview:

Description:
Scroller.js is a lightweight and customizable smooth scrolling JavaScript library that works with any element (not only anchor links).
How to use it:
1. Import the Scroller.js as a module.
import Scroller from "./dist/scroller-es6.min.js";
2. Initialize the Scroller.js.
new Scroller();
3. Enable a button to scroll the page to a specific element within the document.
<button type="button" class="scroll-to" data-scroll="footer"> Scroll To Footer </button>
<footer id="footer"> This is Footer </footer>
4. Enable a button to scroll the page to the top.
<footer id="footer"> <button class="button-up"> Back To Top </button> </footer>
5. It also supports anchor links.
<a href="home.html#footer"> Go to footer in home.html </a>
new Scroller({ linkSelector: "a" });
6. Set the top offset in pixels. It can be useful when you have a sticky nav on the site.
new Scroller({ // 100px offsetTop: 100, // or calculate the top offset based on nav's height? navAutoOffset: true, navSelector: "nav", });
7. All default options.
new Scroller({ btnSelector: ".scroll-to", btnAttr: "data-scroll", btnPreventDefault: true, offsetTop: 0, navAutoOffset: false, navSelector: "nav", btnUpSelector:".button-up", linkSelector: "a", log: false, logLang: "en" });