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>

Browser Support

Supported on all modern browsers. For older browsers, you would need the polyfills for requestAnimationFrame.