Author: | bfiessinger |
---|---|
Views Total: | 1,452 views |
Official Page: | Go to website |
Last Update: | March 13, 2021 |
License: | MIT |
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.