First add Smoothy to your project. It can be done in different ways. Either add it manually by copying the code from Github or install it using a package manager. You can also choose to clone it from the Github repository.
# via npm:
$ npm install smoothy
# 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 or use Smoothy in an external script file. Just ensure you initialize Smoothy after the Smoothy source code.
# source:
<script src="dist/smoothy.min.js"></script>
# initialize:
<script>
smoothy.init();
</script># link to target:
<a href="#id"></a>
# target element:
<div id="id"></div>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. type: function options: function | undefined default: undefined
A collection of easing patterns to choose from. type: string 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. type: integer default: 0
Defines the average speed. Speed returns pixels per second. type: integer default: 1000
Defines the animation time. It will be used if type is set to time. type: integer default: 500
Speed is the default animation type for Smoothy. type: string options: speed | time default: speed