Change Web Sections to One Page Scrolling Effect In JavaScript Plugin | docSlider.js

docSlider.js is a JavaScript plugin that works without jQuery. This plugin is a lightweight vertical/horizontal one-page scrolling JS library that supports side navigation, keyboard interactions, scrollable elements, and anchor links.

How to make use of it:

1. Import the stylesheet docSlider.css and JavaScript docSlider.js.

<link rel="stylesheet" href="docSlider.css" />
<script src="docSlider.min.js"></script>

2. Add fullscreen sections to a container named docSlider. To allow the anchor links you should specify a singular ID for every section as follows:

<div class="docSlider">
  <section id="one">...</section>
  <section id="two">...</section>
  <section id="three">...</section>

3. Initialize the docSlider.js library.


4. Customize the transition effect when switching between web page sections.

  speed : 600,
  startSpeed : null,
  easing : 'ease',
  scrollReset : false

5. Determine whether or not or to not show the aspect navigation.

  pager: false

6. Change the path of the slider.

  horizontal: true

7. Callback features.

/* parameters:
options   : options object value.
elements  : docSlider's elements object. {wrapper, pages, pager, buttons}
index     : current page index value.
page      : current page element.
toIndex   : destination page index value.
toPage    : destination page element.
fromIndex : source page index value.
fromPage  : source page element.
type      : page change type. "scroll" / "pager" / "anchor" / "key" / "focus" / "jumpPage" / "nextPage" / "prevPage"
  complete : function (options) {},
  beforeChange: function (index,page,toIndex,toPage,type) {},
  afterChange: function (index,page,fromIndex,fromPage,type) {}

8. API strategies.

// go to a specific section
docSlider.jumpPage(indexOrId, speed, easing);

// go to the next section
docSlider.nextPage(speed, easing);

// go to the previous section
docSlider.prevPage(speed, easing);

// enable/disable the instance

// get data

9. CSS setting features.

/* parameters:
index : page element's index value.
currentIndex : current page element's index value.
horizontal : horizontal mode boolean value.
speed : option's speed values
easing : option's easing values
  setInitCss: function(index, horizontal){
    const point = horizontal ? 'left' : 'top';
    const style = {};
    style[point] = index * 100 + '%';
    return style;
  function (index, currentIndex, speed, easing, horizontal) {
    const xy = horizontal ? 'X' : 'Y';
    const style = {};
    style.transitionProperty = 'transform';
    style.transitionDuration = speed + 'ms';
    style.transitionTimingFunction = easing;
    style.transform = 'translate' + xy + '(-' + currentIndex * 100 + '%)';
    return style;

One Page Scroll Effect In Vanilla JavaScript, docSlider.js Plugin/Github

See Demo And Download

Official Website(prjct-samwest): Click Here

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

Related Posts


How to Create a Simple Cookie Banner Consent Using Bootstrap 4

Cookie Consent Popup Javascript – Quick and simple tutorial for creating a simple Bootstrap cookie banner. If you have a website or blog with people visiting or…


Create Custom HTML Terminals With Pure JavaScript | shell.js

Custom HTML Terminals is A JavaScript library to create HTML terminals on web pages. The shell js JavaScript library offers a straightforward method to create Ubuntu, OS X,…


Bootstrap Alert, Confirm, and Flexible Dialog Boxes | Bootbox

Bootbox.js is a small JavaScript library that allows you to create programming dialogs using Bootstrap templates, without having to worry about creating, managing, or removing any required…


An Accessible Touch-enabled Slider Web Component | fg-carousel

fg-carousel Slider – A simple & modern slider web component to create versatile, accessible, touch-enabled picture carousels utilizing CSS scroll snap, Custom Element, and Intersection Observer API….


A Lightweight and Efficient Tags Input Component in Vanilla JS | tagify

tagify transforms an input field or textarea into a tags component, in an easy and customizable way, with great performance and a small code footprint, full of…


A Lightweight Library to Copy Text to Clipboard | CopyJS

CopyJS is a lightweight JavaScript library that allows you to copy plain text or HTML content to the clipboard. Must Read: Tiny Library for Copy Text In…