awesome-scroll-to v1.0.3

Awesome scroll to

Lightweight 676B (GZIPPED) scroll to function. Scrolls your Document or any other DOM element.

Demo

See the DEMO

Features

• Function as a Promise
• Types for TypeScript
• Awesome API
• No Window scroll
• Cross Browser

Usage

Install from NPM

npm install awesome-scroll-to

Use into your App

import {awesomeScrollTo} from 'awesome-scroll-to';

// Returns a promise which will be resolved when scroll animation is finished

// Examples:

// Scroll by document
awesomeScrollTo(document.documentElement, { offset: { top: 300 } }).then(() => {
  console.log('Animation scroll is done')
});

// Scroll by container
awesomeScrollTo(document.querySelector('.scroll-content'), { offset: { top: 200 } });

// Scroll diagonally
awesomeScrollTo(document.querySelector('.scroll-content'), { offset: { top: 600, left: 600} });

// Scroll to ellement
const elementPosition = document.querySelector('.block-to-scroll').getBoundingClientRect().top;
awesomeScrollTo(document.documentElement, {offset: {top: elementPosition}})

Options

const options = {
	offset: {
		top?: 0,
		left?: 0
	},
	duration: 600,
	animation: 'linear'
}

Animations

'linear' | 'easeInOut' | 'easeOut'

Browser support

All modern browsers