Animate Scrolling To Anchor Links – scrollToSmooth

Just another pure JS smooth scroll library to animate the page scrolling to specified anchor links, with or without easing functions.

Works with sticky navigation bar. Perfect for site navigation on the long web page.

To learn more about Smooth Scroll, check out our 10 Best Smooth Scroll JavaScript Plugins.

How to use it:

1. Install and import the scrollToSmooth as an ES module.

# NPM
$ npm i scrolltosmooth

import { 
  scrollToSmooth, 
  HorizontalScrollPlugin,
  SnapPlugin,
  TouchMomentumPlugin,
  easeOutCubic
} from 'scrolltosmooth';

2. Or load the main JavaScript scrolltosmooth.js right before the closing body tag.

<!-- With all easings and plugins -->
<script src="/path/to/dist/scrolltosmooth.pkgd.min.js"></script>
<!-- With linear easing only -->
<script src="/path/to/dist/scrolltosmooth.min.js"></script>

3. Create anchor links pointing to related positions of the webpage.

<nav>
  <a href="#section-1">Section 1</a>
  <a href="#section-2">Section 2</a>
  <a href="#section-3">Section 3</a>
  <a href="#section-4">Section 4</a>
  <a href="#section-5">Section 5</a>
</nav>

4. Initialize the scrollToSmooth library on the anchor links and done.

let smoothScroll = new scrollToSmooth('a', {
    // options here
});
smoothScroll.init();

5. Set the duration of the animation.

let smoothScroll = new scrollToSmooth('a', {
    // duration in ms
    duration: 400,
    // adjust the scroll animation duration by the amount of pixels to scroll
    durationRelative: false,
    // minimum amount of milliseconds to perform the animation when using a relative duration
    durationMin: null,
    // max amount of milliseconds to perform the animation when using a relative duration
    durationMax: null,
});

6. Apply an easing function to smooth scrolling. Available easing functions:

• linear
• easeInQuad
• easeOutQuad
• easeInOutQuad
• easeInCubic
• easeOutCubic
• easeInOutCubic
• easeInQuart
• easeOutQuart
• easeInOutQuart
• easeInQuint
• easeOutQuint
• easeInOutQuint
• easeInSine
• easeOutSine
• easeInOutSine
• easeInExpo
• easeOutExpo
• easeInOutExpo
• easeInCirc
• easeOutCirc
• easeInOutCirc
• easeInElastic
• easeOutElastic
• easeInOutElastic
• easeInBack
• easeOutBack
• easeInOutBack
• easeInBounce
• easeOutBounce
• easeInOutBounce

let smoothScroll = new scrollToSmooth('a',{
    easing: "linear"
})

7. Set the offset in pixels or specify an element (typically a fixed header) to calculate the final position of the scrolling animation.

let smoothScroll = new scrollToSmooth('a', {
    offset: '#fixed-header'
});

8. Customize the attribute to determine the target element. Default: ‘href’.

let smoothScroll = new scrollToSmooth('a', {
    targetAttributet: '#target'
});

<span data-scrollto="#target">Scroll to Section 1<span>

9. Callback functions.

let smoothScroll = new scrollToSmooth('a',{
    onScrollStart: (data) => {  },
    onScrollUpdate: (data) => {  },
    onScrollEnd: (data) => {  },
})

10. API methods.

// scroll to a specific element
smoothScroll.scrollTo('.your-selector');

// scroll to a point or a specific element
smoothScroll.scrollTo(50);

// scroll by a fixed amount of pixels
smoothScroll.scrollBy(150);

// cancel the animation
smoothScroll.cancelScroll();

// update options
smoothScroll.update({
  // options here
});

// destroy
smoothScroll.destroy();

Changelog:

v4.0.0/1 (03/22/2026)

• Core build now tree‑shakeable: only linear easing is included by default. Additional easing functions must be imported individually from scrolltosmooth/easings/… or resolved with getEasing().
• ScrollToSmooth now supports registering plugins that hook into the scroll lifecycle for extensibility.
• HorizontalScrollPlugin — enables horizontal scrolling with draggable expander elements.
• SnapPlugin — snap-to-nearest scrolling with configurable debounce delay and target element selector.
• TouchMomentumPlugin — momentum-based touch scrolling for enhanced mobile experience.
• Multi-axis scrolling — scrollTo now accepts a ScrollPoint object to target both x and y axes simultaneously.
• Scroll queue — queueScroll() and clearQueue() methods allow sequential scroll animations to be scheduled and cancelled.
• Progress tracking — scroll update callbacks now receive a progress value (0–1) representing animation completion.
• Native smooth scrolling fallback — optional nativeFallback setting delegates to the browser’s native scroll-behavior: smooth, with a configurable dispatchEvents option.
• Percentage and viewport-height offsets — scroll target offsets can now be expressed as CSS-style strings such as “10%” or “50vh” in addition to plain pixel numbers.
• getEasing(name) helper — resolves an easing function by name at runtime, with a fallback to linear.
• Packaged (IIFE) plugin builds — self-contained bundles for plugins, including auto-registration of HorizontalScrollPlugin in the pkgd build.
• Snapping and touch momentum removed from core — use SnapPlugin and TouchMomentumPlugin instead.
• Easings no longer re-exported from the main package entry point to keep the core bundle small and tree-shakeable.
• Improved TypeScript type definitions and declaration output.
• validateSelector in dom.ts made stricter and more reliable.
• HorizontalScrollPlugin expander element styles consolidated into a single style object for consistency.
• Considerable rewrite and TypeScript conversion to support modular builds.
• Documentation updated for new import patterns, API, architecture, easings, and plugins.
• Bug Fixes.

v3.0.2 (03/06/2026)

• update package configuration and improve build process

v3.0.1 (03/13/2021)

• Fixed: ScrollToSmooth stopped working in version 3.0.0 when the selector to be validated would fail

v3.0.0 (03/09/2021)

• Allow custom easing functions
• Allow a custom amount of pixels to use as an offset
• Animated scrolling links at the very top or bottom can now exceed the actual document so that easing functions like for example easeInOutBounce don’t stop animating while exceeding the document
• Introduced scrollBy method
• scrollTo now accepts numeric values
• Make imports of easings optional to enhance filesize control
• Import linear only per default (see Important Notes)
• Enhanced easing patterns
• Fixed a bug where the final position was calculated wrong in some situations
• Bundled browser file was not transpiled to es5
• Created a seperate file for each easing function
• Create Typescript declaration files
• Various minor bug fixes and structural improvements
• Add esm bundle
• Add cjs bundle
• DOC updated

v2.2.1 (08/01/2020)

• Bugfixes

v2.2.0 (07/25/2020)

• Refactor codebase in TypeScript
• Overall Code improvements
• Fixed a bug where the Scrollposition would be calculated wrong if transforms are used (caused errors with libraries like AOS)

v2.1.5 (05/16/2020)

• Fixed: font-awesome icons not working with anchor href targetAttribute.

The post Animate Scrolling To Anchor Links – scrollToSmooth appeared first on CSS Script.