# @three11/animate-top-offset > Scroll a container to a specific Y offset Latest version **2.0.0** (published 2022-11-28) · GPL-3.0 license · 0 weekly downloads ## Install ```sh npm install @three11/animate-top-offset pnpm add @three11/animate-top-offset yarn add @three11/animate-top-offset bun add @three11/animate-top-offset ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities. Warnings: low downloads; no esm support. Negative: abandoned. ## Facts | | | |---|---| | Version | 2.0.0 | | Published | 2022-11-28 | | First published | 2018-02-23 | | Weekly downloads | 0 | | License | GPL-3.0 | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 58.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 5 | | Maintainers | scriptex, alpanayotov | | Keywords | Scroll to, Animated scroll, Container scroll | ## Links - npm: https://www.npmjs.com/package/@three11/animate-top-offset - Repository: https://github.com/three11/animate-top-offset - Homepage: https://github.com/three11/animate-top-offset#readme - Issues: https://github.com/three11/animate-top-offset/issues - npm.io page: https://npm.io/package/@three11/animate-top-offset ## Alternatives - [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads - [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads - [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads - [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads - [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads ## Recent versions - 2.0.0 (latest) — 2022-11-28 - 1.0.0 — 2021-05-25 - 0.7.0 — 2019-01-16 - 0.6.1 — 2018-10-09 - 0.6.0 — 2018-10-09 - 0.5.0 — 2018-07-07 - 0.4.0 — 2018-07-07 - 0.3.0 — 2018-04-16 - 0.2.0 — 2018-04-02 - 0.1.0 — 2018-02-23 ## README [![GitHub release](https://img.shields.io/github/release/three11/animate-top-offset.svg)](https://github.com/three11/animate-top-offset/releases/latest) [![GitHub issues](https://img.shields.io/github/issues/three11/animate-top-offset.svg)](https://github.com/three11/animate-top-offset/issues) [![GitHub last commit](https://img.shields.io/github/last-commit/three11/animate-top-offset.svg)](https://github.com/three11/animate-top-offset/commits/master) [![Build Status](https://travis-ci.org/three11/animate-top-offset.svg?branch=master)](https://travis-ci.org/three11/animate-top-offset) [![npm](https://img.shields.io/npm/dt/@three11/animate-top-offset.svg)](https://www.npmjs.com/package/@three11/animate-top-offset) [![npm](https://img.shields.io/npm/v/@three11/animate-top-offset.svg)](https://www.npmjs.com/package/@three11/animate-top-offset) [![Analytics](https://ga-beacon.appspot.com/UA-83446952-1/github.com/three11/animate-top-offset/README.md)](https://github.com/three11/animate-top-offset/) # Animate Top Offset > Scroll a container to a specific Y offset ## Install ```sh npm i @three11/animate-top-offset ``` or ```sh yarn add @three11/animate-top-offset ``` ## Usage First, `import` the module: ```ts import animateTopOffset from '@three11/animate-top-offset'; ``` Then use the module: ### With one element ```ts 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 ```ts 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:** ```ts 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 number> | false | List of easing equations | See below | ```ts 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: ```ts const easingEquations: Record 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](https://github.com/three11/scrollspy/blob/master/demo/index.html) Clicking on the links in the menu scrolls the page to the particular section. ## License GNU GENERAL PUBLIC LICENSE Version 3, 29 June 2007 --- _Source: https://npm.io/package/@three11/animate-top-offset · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._