Most smooth-scroll plugins out there are running on a set time. Which sometimes can behave badly if the distance is very short, results in mega slow scroll, or very long, results in mega fast scroll. Smoothy takes care of this by having settings for average speed and set time. Select animation type after your needs.
# via npm:
$ npm install smoothy
# via git clone:
$ git clone https://github.com/kaloja/smoothyEnsure you're using the file in the dist directory, which contains compiled production-ready code. Place the script before the closing </body> tag. The src directory contains development code.
<script src="dist/smoothy.min.js"></script><a href="#id"><!-- Link to target --></a>
...
<div id="id"><!-- Target element --></div>Ensure you initialize Smoothy after its script file.
<script>
smoothy.init();
</script>Smoothy works right out of the box. But you can customize it after your needs, using its API. You can pass your settings and callbacks into Smoothy through the init() function.
smoothy.init({
easing: 'easeInOutQuad',
offset: 80,
speed: 2000,
callback: function() {
console.log('Smoothy scroll animation is done');
}
});Add a function that will be called when the scroll animation has been completed.
options: function | undefined => default: undefined
smoothy.init({
callback: function() {
console.log('Smoothy scroll animation is done');
}
});A collection of easing patterns to choose from.
options: linear | easeInOutQuad | easeInOutCubic => default: linear
Option to offset where the animation ends. If the user interface using a fixed header you can offset the headers height to avoid your target being hidden behind it.
default: 0
Defines the average speed. Speed returns pixels per second.
default: 1000
Defines the animation time.
default: 500
Speed is the default animation type for Smoothy.
options: speed | time => default: speed
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent