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

Animate Top Offset

Scroll a container to a specific Y offset


npm i @three11/animate-top-offset


yarn add @three11/animate-top-offset


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 => {

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


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 => {

		const href ='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');

[], function (button) {
	button.addEventListener('click', function (event) {

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



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.


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.`


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


GNU GENERAL PUBLIC LICENSE Version 3, 29 June 2007

Go back

Send me your message

Trusted by

  • Duke University brand image
  • Emailio brand image
  • E.ON brand image
  • Kinetik Automotive brand image
  • Robert Ladkani brand image
  • SOD 64 brand image