Scroll-to-vertical NPM

scroll-to-vertical

Smooth scroll to element or position at page. Takes into account document height for elements low on the page.

Features

~5 KB
no dependencies
scrolling - bottom, top
specify the amount in pixels that needs to be scrolled
scroll to an element

Installation

npm install scroll-to-vertical --save

Or you can load it via a script tag as follows:

<script src="https://unpkg.com/scroll-to-vertical" />

Importing

ES6

import ScrollToVertical from 'scroll-to-vertical';

CommonJS

var ScrollToVertical = require('scroll-to-vertical');

Global variable

the variable ScrollToVertical attached to window or this depending on what environment you are using

API

`new ScrollToVertical(selector, <options>)`

Property	Value
selector:string(required)	css selector
OPTIONS:
isBehavior:boolean	default: true use native `window.scrollTo` (if the browser supports)
behavior:string	default: smooth option for `window.scrollTo` `smooth, instant, auto`
typeToScroll:string or number or function	default: `string: href` string - name of the attribute where the selector of the element to which scrolling should lie example: `href`, `data-href`... number - position on the page where you want to scroll example: 0 - to scroll up function - triggered by every event. Returns the number. Point to scroll to example: return document.documentElement.scrollHeight - to scroll bottom page
step:number	default: 50 number of pixels scrolled at a time
typeToScrollAdd:number	default: 0 indent for the end point of the scroll
eventType:string	default: click event: 'click', 'mouseover' ...
Callbacks
loadCallback	callback function that is called upon initialization parameters: this - instance class
startEventCallback	callback function that is called before eventType (click) parameters: event, this, element, endScrollPosition
beforeAnimationCallback	callback function that is called before start animation parameters: this, element, endScrollPosition
afterAnimationCallback	callback function that is called after finish animation not working on native window.scrollTo (isBehavior=true) parameters: this - instance class
Methods
simulationScroll	scrolls to the desired (dynamic) point takes two parameters a scroll point (number, selector or DOM ELEMENT) and indent for the end point of the scroll

Example Usage

import ScrollToVertical from 'scroll-to-vertical';

new ScrollToVertical('.js_link_nav_scroll', {
    eventType: 'click',
    behavior: "smooth",
    typeToScroll: 20,
    beforeAnimationCallback: function (that, $el, endPosition) {
        console.group('beforeAnimationCallback');
        console.log(that);
        console.log($el);
        console.log(endPosition);
        console.groupEnd();
    }
})

default (no settings)

Click on the link. Scroll to the element whose selector is registered in the href

<a class="js_link_nav_scroll" href="#section_1">scroll to section_1</a>
<div id="#section_1"></div>

<script>  
    new ScrollToVertical('.js_link_nav_scroll');
</script>

Dynamic value - method simulationScroll

<script>  
    const simulateScroll = new  ScrollToVertical('empty');
    /** scroll to the point */
    setTimeout(() => {
        simulateScroll.simulationScroll(1120)
    }, 1000);
    setTimeout(() => {
        /** scroll to the DOM element (by selector). And indent for the end point of the scroll */
        simulateScroll.simulationScroll('#content', -50)
    }, 2000);
    setTimeout(() => {
        /** scroll to the DOM element (by DOM ELEMENT). And indent for the end point of the scroll */
        simulateScroll.simulationScroll(document.getElementById('content'), -50)
    }, 3000);
</script>