Super Smooth Scroll To JavaScript Library – Scroller.js

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"
    
});