Animate Top Offset

Scroll a container to a specific Y offset

Install

npm i @three11/animate-top-offset

or

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