Animate Top Offset

Scroll a container to a specific Y offset

Install

npm i @three11/animate-top-offset

yarn add @three11/animate-top-offset

Usage

First, import the module:

import animateTopOffset from '@three11/animate-top-offset';

Then use the module:

With one element

const button = document.getElementById('button');

button.addEventListener('click', event => {
	event.preventDefault();

	const href = event.target.getAttribute('href');
	const offset = doc.querySelector(href).offsetTop;

	animateTopOffset(offset);
});

With many elements

const buttons = document.querySelectorAll('.js-scroll-to');

// Instead of Array.from you can spread the buttons: [...buttons]
Array.from(buttons).forEach(button => {
	button.addEventListener('click', event => {
		event.preventDefault();

		const href = event.target.getAttribute('href');
		const offset = doc.querySelector(href).offsetTop;

		animateTopOffset({ offset });
	});
});

The examples above assume that you have a modern ES6 setup installed and configured (Webpack, Babel, etc). If not you can always fallback to ES5:

const buttons = document.querySelectorAll('.js-scroll-to');

[].forEach.call(buttons, function (button) {
	button.addEventListener('click', function (event) {
		event.preventDefault();

		var href = event.target.getAttribute('href');
		var offset = doc.querySelector(href).offsetTop;

		animateTopOffset(offset);
	});
});

Arguments

The function accepts the following options:

Name	Type	Required	Description	Default value
`offset`	number	false	Offset to scroll to	0
`container`	`HTMLElement` \| `Window`	false	The element to scroll	window
`speed`	number	false	Speed of the scroll animation	200
`easing`	'easeOutSine' \| 'easeInOutSine' \| 'easeInOutQuint'	false	Easing of the scroll animation	'easeOutSine'
`easings`	Record<string, (pos: number) => number>	false	List of easing equations	See below

animateTopOffset({ offset: 0, container: window, speed: 2000, easing: 'easeOutSine', easings: easingEquations });

Calling the function with the default values (animateTopOffset()) will scroll the window back to top.

Easings

animateTopOffset provides the ability to specify a custom list of easing functions. The default one contains three easings: 'easeOutSine', 'easeInOutSine' and 'easeInOutQuint'.

The shape of the list is the following:

const easingEquations: Record<string, (pos: number) => number> = {
	easeOutSine: (pos: number) => Math.sin(pos * (Math.PI / 2)),
	easeInOutSine: (pos: number) => -0.5 * (Math.cos(Math.PI * pos) - 1),
	easeInOutQuint: (pos: number) => {
		if ((pos /= 0.5) < 1) {
			return 0.5 * Math.pow(pos, 5);
		}

		return 0.5 * (Math.pow(pos - 2, 5) + 2);
	}
};

The easing argument should match one of the keys of the easings argument.`

Demo

A minimal demo is available here Clicking on the links in the menu scrolls the page to the particular section.

License

GNU GENERAL PUBLIC LICENSE Version 3, 29 June 2007

Go back