JavaScript Library For One Page Scroll Website – inscroll

Preview:

Description:

inscroll is a standalone JavaScript library used to create a smooth vertical scrolling effect for your one page website or single page application.

How to use it:

Add a set of content sections  to your webpage. Note that each section must have an unique data-page attribute as follow.

<section data-page="section1">
  <h2>Section One</h2>
</section>
<section data-page="section2">
  <h2>Section Two</h2>
</section>
<section data-page="section3">
  <h2>Section Three</h2>
</section>

Load the scrollIt.min.css, polyfill.min.js and scrollIt.min.js into the webpage.

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

Active the one page scrolling effect.

var scrollIt = new ScrollIt();

Possible options.

var scrollIt = new ScrollIt({
    // displays side navigation
    nav: true,
    // transition time
    time: 200,
    // transition delay
    delay: 150,
    // base element
    elem: document.body
    
});

API.

// go to next section
document.querySelector('buttom#next').addEventListener(function(){
    scrollIt.next();
});
// back to previous section
document.querySelector('buttom#previous').addEventListener(function(){
    scrollIt.previous();
});
// scroll to section 2
document.querySelector('buttom#to2').addEventListener(function(){
    scrollIt.scroll(1);
});