Scroll a Single Page Full Screen in Vanilla JavaScript | Slider Scroll

Slider scrolling is a single-page, full-screen scrolling effect that enables users to scroll through full-page sections using the mouse wheel.

one page scroll animation css, one page scrolling website, one page scroll example, jquery one page scroll animation, jquery one page scroll animation, single page scrolling website html

Single Page Scroll Vanilla JavaScript Plugin | EasyScrollDots

How to make use of it:

1. The required HTML structure.

<div class="layout">
  <div class="section-stick">
    <div class="stick active"></div>
  <section class="s1">
    <div class="home">
      <span>Slider Scroll Example</span>
      <svg xmlns="" xmlns:xlink="" aria-hidden="true" focusable="false" width="1em" height="1em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 20 20"><path d="M5 6l5 5l5-5l2 1l-7 7l-7-7z" fill="#fff"/><rect x="0" y="0" width="20" height="20" fill="rgba(0, 0, 0, 0)" /></svg>
  <section class="s2">Section Two</section>
  <section class="s3">Section Three</section>
  <section class="s4">Section Four</section>

2. The required CSS styles.

:root {
  --color-white: #fff;
  --time-animation: 0.6s;

@keyframes pulse {
  0% {
    transform: translateY(0px);
  50% {
    transform: translateY(25px);
  100% {
    transform: translateY(0px);

html {
  scrollbar-width: none;

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  overflow: hidden scroll;
  -ms-overflow-style: none;

body::-webkit-scrollbar {
  display: none;

.layout {
  width: 100%;
  height: calc(100vh * 3);
  position: relative;

.layout .section-stick {
  margin: auto;
  position: fixed;
  right: 50px;
  bottom: 50px;
  display: flex;
  flex-direction: column;
  row-gap: 30px;
  align-items: center;
  justify-content: flex-start;
  z-index: 1000;

.layout .section-stick .stick,
.layout .section-stick .active {
  width: 13px;
  height: 62px;
  border: none;
  border-radius: 9px;

.layout .section-stick .stick {
  position: relative;
  background-color: rgba(255, 255, 255, 0.4);
  transition: all var(--time-animation) ease-in-out;

.layout .section-stick .active {
  position: absolute;
  background-color: var(--color-white);
  box-shadow: 0px 0px 12px 1px var(--color-white);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);

.layout section {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-white);
  font-size: 80px;
  font-weight: 600;
  transform: translateY(100vh);
  transition: all var(--time-animation) ease-in-out;
  z-index: 0;

.layout section .home {
  display: flex;
  flex-direction: column;
  row-gap: 45px;
  align-items: center;

.layout section .home svg {
  animation: pulse 1.4s linear infinite normal;

.layout .s1 {
  background-color: #4d2536;
  transform: translateY(0);
  z-index: 4;

.layout .s2 {
  background-color: #02486b;
  z-index: 3;

.layout .s3 {
  background-color: #171716;
  z-index: 2;

.layout .s4 {
  background-color: #154621;
  z-index: 1;

/*** RESPONSIVE ***/

/* MOBILE */
@media screen and (max-width: 576px) {
  body::-webkit-scrollbar {
    width: 0px;
    background: transparent;
    -webkit-appearance: none;

  .layout .section-stick {
    right: 20px;
    bottom: 20px;
    transform: scale(0.7);

  .layout section {
    font-size: 40px;

3. The essential JavaScript to allow the one web page scrolling impact.

const TIME_OUT = 600 // It should be the same transition time of the sections
const body = document.querySelector('body')
const sectionsQty = document.querySelectorAll('section').length
const sectionStick = document.querySelector('.section-stick')
let startFlag = true
let initialScroll = window.scrollY
let qty = 1,
  main = null,
  next = null
// Add child elements in .section-stick as number of sections exist
  .forEach(() => {
    sectionStick.innerHTML = sectionStick.innerHTML + '<div class="stick"></div>'
console.log('SLIDE', qty)
// Listening to scroll event
window.onscroll = () => {
  if (startFlag) {
    const scrollDown = this.scrollY >= initialScroll
    const scrollLimit = qty >= 1 && qty <= sectionsQty
    // Verify that the scroll does not exceed the number of sections
    if (scrollLimit) { = 'hidden' // Lock el scroll
      if (scrollDown && qty < sectionsQty) {
        main = document.querySelector(`section.s${qty}`)
        next = document.querySelector(`section.s${qty + 1}`) = 'translateY(-100vh)' = 'translateY(0)'
      } else if (!scrollDown && qty > 1) {
        main = document.querySelector(`section.s${qty - 1}`)
        next = document.querySelector(`section.s${qty}`) = 'translateY(0)' = 'translateY(100vh)'
      // Scroll progressbar
      const active = document.querySelector('.section-stick') = (62 + 30) * (qty - 1) + 'px'
    console.log('SLIDE', qty)
    // Wait for the scrolling to finish to reset the values
    setTimeout(() => {
      initialScroll = this.scrollY
      startFlag = true = 'scroll' // Unlock scroll
    }, TIME_OUT)
    startFlag = false
  // Keep scrollbar in the middle of the viewport
  window.scroll(0, window.screen.height)

Fullscreen One Page Scroll, Slider Scroll Plugin/Github

See Demo And Download

Official Website(EdixonAlberto): Click Here

This superior jQuery/javascript plugin is developed by EdixonAlberto. For extra Advanced Usages, please go to the official website.

Related Posts


Responsive Multiple Selection Combo Box using Bootstrap 3 | MagicSuggest

MagicSuggest is an easy-to-use jQuery plugin for creating a combo menu that allows you to select multiple items from a dropdown list with typing and auto-complete support….


Material Design Inspired Tab UI In Vanilla JavaScript

Material Design tab vanilla JS implements a material design-inspired tab component with a click ripple effect and an active sliding menu cursor. Must Read: Responsive Accessible Tabs…


Simple Countdown Timer App In jQuery

The countdown is a front-end application that allows starting the countdown with two options: set a target date or write the number of countdown days. A countdown…


Add Animation to Your HTML5 Pages | animate.js

animate.js is a small JavaScript library that provides a convenient way to apply CSS animations powered by Animate.css to DOM elements without writing any CSS. Easily apply…


Responsive Hover Parallax Cards With Vuejs

Vue Responsive Parallax Cards Hover Create response cards with a scroll-triggered parallax effect in your Vue.js application. Must Read: jQuery Sliding Display Your Content Like a Deck…


Responsive Pure CSS Only Accordion & Tabs Component

Responsive pure CSS accordion tabs and tabs will automatically convert to a vertical accordion interface on mobile devices. Must Read: Create Dynamic Accordion Giving JSON Data Using…