Mobile-friendly One Page Scroll JavaScript Library – PureFullPage.js

PureFullPage.js is a lightweight JavaScript plugin that provides a smooth and touch-enabled one-page scrolling functionality for your single-page apps and landing pages.

It supports both mouse drag and touch swipe gestures and features a handy side pagination control.

How to use it:

1. To get started, load the pureFullPage.min.css and pureFullPage.min.js files in the document.

<link rel="stylesheet" href="/dist/pureFullPage.min.css">
<script src="/dist/pureFullPage.min.js"></script>

2. Or install the library via NPM.

# NPM
$ npm i pure-full-page

import "pure-full-page/lib/pureFullPage.min.css";
import PureFullPage from "pure-full-page";

3. Add ‘pages’ to the PureFullPage container.

<div id="pureFullPage">
  <div class="page">
    <p>Page 1</p>
  </div>
  <div class="page">
    <p>Page 2</p>
  </div>
  <div class="page">
    <p>Page 3</p>
  </div>
</div>

3. Initialize the PureFullPage.

new PureFullPage();

4. Determine whether to show the side pagination control. Default: true.

new PureFullPage({
    isShowNav: false,
});

5. Execute a function every time the page scrolls.

new PureFullPage({
    definePages function  () => {}
});