skrllr.js is a flexible JavaScript plugin that implements a basic full-screen, single one-page scrolling effect for your long web content. It also supports mouse wheel and keyboard interactions.

one page scroll website template free, single page scrolling website html, minimalist one page website, one page scroll example

Create One Page Multi Scrolling Split Websites | multiScroll.js

How to make use of it:

1. Add the split pages to the HTML document as follows:

<div class="wrapper">
  <main>
    <section class="section">
      <h1>Section 01</h1>
    </section>
    <section class="section">
      <h1>Section 02</h1>
    </section>
    <section class="section">
      <h1>Section 03</h1>
    </section>
    <section class="section">
      <h1>Section 04</h1>
    </section>
    <section class="section">
      <h1>Section 05</h1>
    </section>
  </main>
</div>

2. Create a one-page scrolling website navigation:

<nav class="main-menu">
  <ul class="pagination">
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
  </ul>
</nav>

3. CSS to make the split pages full screen.

.skrllr-wrapper {
  position: relative;
  display: block;
  width: 100vw;
  height: 100%;
  padding: 0;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.skrllr-section {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.wrapper {
  height: 100% !important;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
}

4. Navigation mode:

.main-menu {
  position: absolute;
  top: 50%;
  right: 20px;
}
.pagination { list-style: none; }
.pagination li {
  position: relative;
  width: 20px;
  height: 20px;
  margin-bottom: 10px
}
.pagination li a {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: black;
  border-radius: 50%;
  margin-bottom: 10px
}
.pagination li a:hover,  .pagination li a.active {
  background-color: white;
  border: 2px solid black;
}

5. Configure Skrllr on the “main” content.

const skrllr = new Skrllr('main', {
      // options here
})

6. Configure a single page scroll behavior.

const skrllr = new Skrllr('main', {
      // child container
      container: 'section',
      // easing function
      easing: 'ease',
      // transition time in ms
      transitionTime: 1000,
      // shows pagination
      pagination: true,
      // custom menu
      menu: null,
      // auto update url when switching
      updateURL: false,
      // callback functions
      beforeTransition: null,
      afterTransition: null
      
})

Minimal One Page Scroll, skrllr Plugin/Github, single page no scroll website template, one page website template

See Demo And Download

Official Website(builtbyedgar): Click Here

This superior jQuery/javascript plugin is developed by builtbyedgar. For extra advanced usage, please go to the official website.