JavaScript Dev

JavaScript Dev


One Page Scroll Effect In Vanilla JavaScript


docSlider.js is a JavaScript plugin that works without jQuery.
Change the web sections to a one-page scroll.



Install it from npm or download the file.

npm Install

npm install docslider

File Download


Step1 - Include the CSS and JavaScript files

Add a CSS to the <head> tag.

<link rel="stylesheet" href="docSlider.css">

Add a JavaScript to just before the </body> tag.

<script src="docSlider.min.js"></script>

Step2 - HTML markup

<div class="docSlider">

Step3 - Initialize docSlider



Option Type Default Description
speed int 600 Page change speed.(ms)
easing string “ease” Page change easing animation.
It corresponds to the CSS property "transition-timing-function".
pager boolean true Show pager button.
horizontal boolean false Horizontal scroll mode.
startSpeed int null Page change speed when jumping from an external page using a hashtag. (ms)
If not set, it will be set to the same value as "speed".
complete function Callback function. See below for details.
beforeChange function Callback function. See below for details.
afterChange function Callback function. See below for details.
setInitCss function CSS setting function. See below for details.
setChangeCss function CSS setting function. See below for details.


// change the speed
    speed : 500

// change the speed and easing
    speed : 500,
    easing : 'ease-in-out'

Callback functions

function Params Description
complete options, elements Triggered after the docSlider.js has been initialized.
beforeChange index, page, toIndex, toPage, type Triggered before the page changes.
afterChange index, page, fromIndex, fromPage, type Triggered after the page changes.


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"


    beforeChange : function(index){
        console.log('current index is ' + index);

CSS setting functions

If you want to change the initial placement of the page or the CSS settings for page changes, please use it.

function Params Description
setInitCss index, horizontal Invoked to initialize each page.
Function to set the initial position CSS of the page.
setChangeCss index, currentIndex, speed, easing, horizontal Invoked to change each page.
Function to set the ‘transition’ of each page.


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


By default settings, the “top” or “left” property is used to place each page.

 function(index, horizontal){

    const point = horizontal ? 'left' : 'top';
    const style = {};

    style[point] = index * 100 + '%';

    return style;



By default settings, the “transition” property is used to make moves on each page.

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;



Method Arguments Description
init options Initialize docSlider.js.
jumpPage to, speed, easing Jump to any page.
nextPage speed, easing Jump to next page.
prevPage speed, easing Jump to previous page.
getOptions - Gets an options object value.
getElements - Gets docSlider.js’s Elements object value.
getCurrentIndex - Gets an current page index value.
getCurrentPage - Gets an current page element.
enable toggle Enable / disable all docSlider.js’s operations.

jumpPage method Example

docSlider.jumpPage(2);  // Jumps to the page with index number 2 (page 3).

jumpPage method example (using a hashtag)

docSlider.jumpPage('foo');  // Jumps to the page with id name 'foo' (page 2).

If you want to use hashtag jump, you need to set the ID name if necessary.

<div class="docSlider">
  <section id="hoge">...</section>
  <section id="foo">...</section>
  <section id="bar">...</section>

Other features

1. Jump from external site to any page

<a href="index.html#foo">jump to #foo page</a>

Just link like you would a normal anchor link.
If you want to use hashtag jump, you need to set the ID name if necessary.

2. Supports scroll elements

You can avoid mouse wheel event conflicts by simply adding the class name "docSlider-scroll" to the scrolling element.

<div class="docSlider-scroll">

3. Supports key-press

Key Description
[ Space ] / [ PageDown ] / [ ArrowDown ] Scroll down / jump to next page.
[ Shift ] + [ Space ] / [ PageUp ] / [ ArrowUp ] Scroll up / jump to previous page.
[ End ] Jump to last page.
[ Home ] Jump to first page.
[ Tab ] Jump to next page.
[ Shift ] + [ Tab ] Jump to previous page.
[ ArrowRight ] Jump to next page. (horizontal mode only)
[ ArrowLeft ] Jump to previous page. (horizontal mode only)

Browser support

docSlider.js works on modern browser as Chrome, Firefox, Safari, Edge, IE11.


The latest version is 2.0.4

Download Details:

Author: prjct-samwest

Live Demo:


#javascript #jquery

What is GEEK

Buddha Community

One Page Scroll Effect In Vanilla JavaScript

Rahul Jangid


What is JavaScript - Stackfindover - Blog

Who invented JavaScript, how it works, as we have given information about Programming language in our previous article ( What is PHP ), but today we will talk about what is JavaScript, why JavaScript is used The Answers to all such questions and much other information about JavaScript, you are going to get here today. Hope this information will work for you.

Who invented JavaScript?

JavaScript language was invented by Brendan Eich in 1995. JavaScript is inspired by Java Programming Language. The first name of JavaScript was Mocha which was named by Marc Andreessen, Marc Andreessen is the founder of Netscape and in the same year Mocha was renamed LiveScript, and later in December 1995, it was renamed JavaScript which is still in trend.

What is JavaScript?

JavaScript is a client-side scripting language used with HTML (Hypertext Markup Language). JavaScript is an Interpreted / Oriented language called JS in programming language JavaScript code can be run on any normal web browser. To run the code of JavaScript, we have to enable JavaScript of Web Browser. But some web browsers already have JavaScript enabled.

Today almost all websites are using it as web technology, mind is that there is maximum scope in JavaScript in the coming time, so if you want to become a programmer, then you can be very beneficial to learn JavaScript.

JavaScript Hello World Program

In JavaScript, ‘document.write‘ is used to represent a string on a browser.

<script type="text/javascript">
	document.write("Hello World!");

How to comment JavaScript code?

  • For single line comment in JavaScript we have to use // (double slashes)
  • For multiple line comments we have to use / * – – * /
<script type="text/javascript">

//single line comment

/* document.write("Hello"); */


Advantages and Disadvantages of JavaScript

#javascript #javascript code #javascript hello world #what is javascript #who invented javascript

Hire Dedicated JavaScript Developers -Hire JavaScript Developers

It is said that a digital resource a business has must be interactive in nature, so the website or the business app should be interactive. How do you make the app interactive? With the use of JavaScript.

Does your business need an interactive website or app?

Hire Dedicated JavaScript Developer from WebClues Infotech as the developer we offer is highly skilled and expert in what they do. Our developers are collaborative in nature and work with complete transparency with the customers.

The technology used to develop the overall app by the developers from WebClues Infotech is at par with the latest available technology.

Get your business app with JavaScript

For more inquiry click here

Book Free Interview:

#hire dedicated javascript developers #hire javascript developers #top javascript developers for hire #hire javascript developer #hire a freelancer for javascript developer #hire the best javascript developers

Vada DVM

Vada DVM


Smooth Scroll | Momentum Scrolling | Vanilla Javascript

In this video, I have created smooth scrolling aka momentum scrolling using javascript,html and css3. It’s really a quick and simple way for building smooth scroll in html/css and javascript. It can be useful for displaying any kind of information in different sections or may be in a landing page using smooth scroll on a webpage.


#javascript #vanilla javascript

Sofiaml Boo

Sofiaml Boo


CSS3 Clip-path Transform Effects on Scroll with Video Background | Html CSS Vanilla Javascript

Enroll My Course : Next Level CSS Animation and Hover Effects…

Another Course : Build Complete Real World Responsive Websites from Scratch…

Join Our Channel Membership And Get Source Code of My New Video’s Everyday!

Join :…

#css #css3 #html #vanilla javascript #javascript

Niraj Kafle


The essential JavaScript concepts that you should understand

As a JavaScript developer of any level, you need to understand its foundational concepts and some of the new ideas that help us developing code. In this article, we are going to review 16 basic concepts. So without further ado, let’s get to it.

#javascript-interview #javascript-development #javascript-fundamental #javascript #javascript-tips