Scroll To Desired Page Offset Or A Specific Element – animated-scroll-to

Preview:

Description:

animated-scroll-to is a vanilla JavaScript smooth scroll library that smoothly scrolls the page (or a scrollable element) to desired page offset or a specific element within the document.

Supports both vertical and horizontal page scrolling.

How to use it:

Install and download the animated-scroll-to package.

# NPM
$ npm install animated-scroll-to --save

Import the animated-scroll-to library.

<script src="animated-scroll-to.js"></script>

// es module
import animateScrollTo from 'animated-scroll-to';

Scroll to a specific point.

// scroll to 500px
animateScrollTo(300);

Scroll to a specific element.

animateScrollTo(document.querySelector('.footer'));

Customize the duration of the scroll animation.

animateScrollTo(300,{
  minDuration: 250,
  maxDuration: 1500
});

Customize the animation speed.

animateScrollTo(300,{
  speed: 500
});

Stop the smooth scrolling when a user interacts with your page.

animateScrollTo(300,{
  cancelOnUserAction: true
});

Use horizontal scrolling instead.

animateScrollTo(300,{
  horizontal: true
});

Add an extra offset to the page after scrolling. Default: 0.

animateScrollTo(300,{
  offset: 30
});

Execute a function after finishing the scroll animation.

animateScrollTo(300,{ 
  onComplete: function() {}
});

Set the element to scroll. Default: the whole document.

animateScrollTo(300,{ 
  element: window
});