Basic One Page Scroll In Vanilla JavaScript – LeScroll

Preview:

Description:

LeScroll.js Helps you create a responsive one page scrolling website with CSS transitions, written in vanilla JavaScript.

Use either your keyboard, mouse or the bullets on the right side of this page to navigate through all the different sections.

How to use it:

Load the lescroll.js at the end of the document.

<script src="scripts/lescroll.min.js">

The markup structure to create a one page scrolling website.

<div id="mask">
  <nav>
    <ul>
      <li data-section="0"></li>
      <li data-section="1"></li>
      <li data-section="2"></li>
      <li data-section="3"></li>
    </ul>
  </nav>
  <div id="container">
    <section class="turquoise-bg">
      <div class="content">
        Content 1
      </div>
    </section>
    <section class="carrot-bg">
      <div class="content">
        Content 2
      </div>
    </section>
    <section class="blue-bg">
      <div class="content">
        Content 3
      </div>
    </section>
    <section class="turquoise-bg">
      <div class="content">
        Content 4
      </div>
    </section>
  </div>
</div>

Simply add an event by specifying the id or class of your element and the section you want it linked to.

leScroll.addEvent('#clickme', 0); 
leScroll.addEvent('.next', 3);