moveTo is a dependency-free JavaScript library for animating page scroll, aimed at front-end developers who need smooth click-to-scroll and anchor movement without pulling in a larger framework.

What it is

moveTo is a small, dependency-free scroll animation library published to npm as moveto, with builds also hosted on cdnjs. It weighs about 1kb gzipped and is licensed under MIT. At its core, the library instantiates a MoveTo object whose move(target) method animates the page from its current position to a target element or numeric scroll distance, and whose registerTrigger(trigger) method binds that animation to a clicked element.

The specific problem it solves is the boilerplate that otherwise surrounds smooth scrolling: duration handling, easing curves, tolerance offsets, and per-trigger callbacks. Instead of writing scroll math by hand or loading a general-purpose animation or utility package, a developer can call moveTo.move(target) and configure behaviour through constructor options such as tolerance, duration, easing, container, and callback, or through mt-prefixed data attributes written in kebab case directly in the trigger markup.

Key capabilities

• Animates scroll to an HTMLElement or a numeric position via move(target, options), where a negative number scrolls upward.
• Registers click-to-scroll triggers with registerTrigger(trigger, callback), returning an unregister function so a trigger can later be detached.
• Configures tolerance, duration (default 800ms), easing (default easeOutQuart), container (default window), and a callback that receives the target when scrolling completes.
• Accepts all options as mt-prefixed data attributes on the trigger element, written in kebab case, so behaviour can be set in HTML rather than JavaScript.
• Adds custom easing curves with addEaseFunction(name, fn) or by passing a map of ease functions when constructing the instance.
• Supports global callbacks on the instance, per-trigger callbacks, and per-call callbacks passed to move(), with the more specific one overriding the general one.
• Provides ready patterns for common page interactions, including a back-to-top loop over elements with class js-back-to-top.

Who uses it and how

• Front-end developers wiring navigation links or in-page anchors to smooth scroll animation on static and single-page sites.
• Teams that want per-link configuration through HTML data attributes, letting designers adjust duration or easing without touching script files.
• Projects that need to unregister and re-register triggers as the DOM changes, using the function returned by registerTrigger().
• Sites that require a callback after a scroll finishes, for example to update UI state or to run a different function per trigger while retaining a site-wide default.

Getting started

Install it with npm install moveto --save or yarn add moveto, then create an instance with const moveTo = new MoveTo() and call moveTo.move(target) or moveTo.registerTrigger(trigger).

How it compares

moveTo occupies a narrow band of the JavaScript ecosystem: it handles scroll animation only, where a general animation or utility library would have to be configured down to do the same job. Because it declares no dependencies and ships at roughly 1kb gzipped, it can be added to a page that otherwise has no runtime library at all.

When to use it — and when not to

A self-hoster here needs only a browser environment; there is no database, storage, or service to operate, and the library's surface is a single instance API. It is a poor fit for projects that need scroll-linked or scroll-triggered effects such as parallax and reveal-on-scroll, since the README documents click-to-scroll and anchor movement rather than viewport observation, and the easing set must be extended by hand through addEaseFunction() for curves beyond the defaults.

$ npm install moveto --save

$ yarn add moveto

const moveTo = new MoveTo();

const target = document.getElementById('target');

moveTo.move(target);

// Or register a trigger

const trigger = document.getElementsByClassName('js-trigger')[0];

moveTo.registerTrigger(trigger);

<a href="#target" class="js-trigger" data-mt-duration="300">Trigger</a>

<!-- Or -->

<button type="button" class="js-trigger" data-target="#target" data-mt-duration="300">Trigger</button>

new MoveTo({
  tolerance: 0,
  duration: 800,
  easing: 'easeOutQuart',
  container: window
})

document.addEventListener('DOMContentLoaded', function () {
  const easeFunctions = {
    easeInQuad: function (t, b, c, d) {
      t /= d;
      return c * t * t + b;
    },
    easeOutQuad: function (t, b, c, d) {
      t /= d;
      return -c * t* (t - 2) + b;
    }
  }

  const moveTo = new MoveTo({
    duration: 1000,
    easing: 'easeInQuad'
  }, easeFunctions);

  const trigger = document.getElementsByClassName('js-trigger')[0];

  moveTo.registerTrigger(trigger);
});

document.addEventListener('DOMContentLoaded', function () {
  const moveTo = new MoveTo({
    duration: 1000,
    callback: function (target) {
      // This will run if there is no overwrite
    }
  });

  const trigger = document.getElementsByClassName('js-trigger')[0];

  moveTo.registerTrigger(trigger, function (target) {
    // Overwrites global callback
  });

  // Or

  moveTo.move(1200, {
    duration: 500,
    callback: function () {
      // Overwrites global callback
    }
  });
});

document.addEventListener('DOMContentLoaded', function () {
  const moveTo = new MoveTo();

  const trigger = document.getElementsByClassName('js-trigger')[0];

  // Register a trigger
  const unregister = moveTo.registerTrigger(trigger, { duration: 500 });

  // Unregister a trigger
  unregister();
});

document.addEventListener('DOMContentLoaded', function () {
  const moveTo = new MoveTo();
  const triggers = document.getElementsByClassName('js-back-to-top');

  for (var i = 0; triggers.length Back to top!</a>

# To install dev dependencies run:

$ yarn

# Or so if using npm:

$ npm install

# To start the development server run:

$ yarn start

# Or so if using npm:

$ npm run start

# To lint your code run:

$ yarn lint

# Or so if using npm:

$ npm run lint

# To make a full new build run:

$ yarn build

# Or so if using npm:

$ npm run build

# To run tests:

$ yarn test

# Or so if using npm:

$ npm test