Scroll a container to a specific Y offset
npm i @three11/animate-top-offsetor
yarn add @three11/animate-top-offsetFirst, import the module:
import animateTopOffset from '@three11/animate-top-offset';Then use the module:
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);
});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);
});
});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
