single-page-scrolling-navigation v1.2.5

CMO Single page scrolling navigation

Small library to handle scroll navigation on one page websites

Install

npm install single-page-scrolling-navigation

import { singlePageNavigation } from "single-page-scrolling-navigation";

Setting

ReactJS:

useEffect(() => {
  singlePageNavigation({
    selector: ".nav",
    childSelector: ".nav li a",
    time: 2000,
    easing: "easeInOutQuad",
    cb: () => console.log("animation finished"),
  });
}, []);

<nav className="nav">
  <ul>
    <li>
      <a href="#about">About</a>
    </li>
    <li>
      <a href="#services">Services</a>
    </li>
    <li>
      <a href="#work">Work</a>
    </li>
    <li>
      <a href="#contact">Contact</a>
    </li>
  </ul>
</nav>

HTML and VanillaJs:

cmoHashNavigation({
  selector: ".nav",
  childSelector: ".nav li a",
  time: 2000,
  easing: "easeInOutQuad",
  cb: () => console.log("animation finished"),
});

<nav class="nav">
  <ul>
    <li>
      <a href="#about">About</a>
    </li>
    <li>
      <a href="#services">Services</a>
    </li>
    <li>
      <a href="#work">Work</a>
    </li>
    <li>
      <a href="#contact">Contact</a>
    </li>
  </ul>
</nav>

Options