Animate Scrolling To Anchor Links – scrollToSmooth

Preview:

Description:

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, 
  easeOutCubic,
  // more easings
} from 'scrolltosmooth';

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

<!-- With all easings -->
<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
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:

v3.0.1 (03/13/2020)

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

v3.0.0 (03/09/2020)

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