Skip to content

three11/animate-top-offset

Folders and files

NameName
Last commit message
Last commit date

Latest commit

18c83c0 · Feb 17, 2025
Oct 24, 2023
Nov 28, 2022
Nov 30, 2018
Nov 28, 2022
Jun 24, 2018
Nov 28, 2022
Nov 28, 2022
Nov 23, 2018
Nov 23, 2018
Nov 28, 2022
Nov 28, 2022
Feb 23, 2018
Dec 8, 2022
Nov 28, 2022
Nov 28, 2022
Feb 17, 2025
Feb 19, 2022
Nov 28, 2022
Nov 28, 2022
Feb 17, 2025

Repository files navigation

GitHub release GitHub issues GitHub last commit Build Status npm npm Analytics

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