Pure JavaScript Library For One Page Scrolling Website – scrollIt.js

Preview:

Description:

scrollIt.js is a pure JavaScript library for generating a sidebar navigation which allows you to navigate through sectioned content with smooth vertical scrolling effects.

How to use it:

Download and import the scrollIt.js script at the end of your web page.

<script src="pageScroll.js"></script>

Create content sections with data-page attribute defining the names of anchor tags.

<section data-page="section-1"></section>
<section data-page="section-2"></section>
<section data-page="section-3"></section>
<section data-page="section-4"></section>
<section data-page="section-5"></section>

The required CSS to make each content slide full window.

section[data-page] {
  height: 100%;
  width: 100%;
  display: block;
  position: relative;
}

The  scrollIt.js will auto generate a sidebar navigation in your screen. You can customize the navigation using CSS as follows:

nav.ctrlPage,
nav.ctrlPage div {
  border: 2px solid black;
  border-radius: 5px;
  transition: background 0.3s linear;
  cursor: pointer;
}
nav.ctrlPage {
  position: fixed;
  right: 1%;
  width: 25px;
  z-index: 9999;
  top: 0;
  bottom: 0;
  margin: auto;
}
nav.ctrlPage div {
  box-sizing: border-box;
  margin: 15% auto;
  width: 20px;
  height: 20px;
  background: white;
}
nav.ctrlPage div.active { background: black; }