Super Smooth Scroll To JavaScript Library – Scroller.js

Category: Animation , Javascript | January 13, 2022
Views Total:2,027 views
Official Page:Go to website
Last Update:January 13, 2022


Super Smooth Scroll To JavaScript Library – Scroller.js


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
<footer id="footer">
  This is Footer

4. Enable a button to scroll the page to the top.

<footer id="footer">
  <button class="button-up">
    Back To Top

5. It also supports anchor links.

<a href="home.html#footer">
  Go to footer in home.html
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",
    linkSelector: "a",
    log: false,
    logLang: "en"

You Might Be Interested In:

Leave a Reply