js.anchor
v1.1.0
Published
Click and go to target. Pretty simple with only ~2KB and without dependencies.
Downloads
14
Maintainers
Readme
Anchor
:anchor: Click and go to target. Pretty simple with only ~2KB and without dependencies.
Install
Bower
bower install anchor.js --save
npm
npm install js.anchor --save
CDN
<script src="https://cdn.rawgit.com/CezarLuiz0/anchor.js/master/dist/anchor.min.js"></script>
Usage
The simplest way.
<header>
<button data-anchor=".contact">
Contact Us!
</button>
<section class="contact">
...
</section>
</header>
var anchor = new Anchor();
anchor.init();
Do you want more options? Sure!
<header>
<button
data-anchor="#jobs"
data-anchor-duration="2000"
data-anchor-offset="200"
>
View our Jobs!
</button>
<div id="jobs">
...
</div>
</header>
Options
<a
href="#fallback"
data-anchor=".clientes-container"
data-anchor-duration="1200"
data-anchor-offset="80"
data-anchor-callback="done"
data-anchor-easing="myCustomEasing"
>
Our clients
</a>
Attributes
Attribute|Required?|Default|Description
---------|---------|-------|-----------
data-anchor
|Yes|-|A CSS like selector to your target.
data-anchor-duration
|No|800
|In milliseconds.
data-anchor-offset
|No|0
|Self descriptive :)
data-anchor-callback
|No|-|The callback will be called when the scroll is finished.
data-anchor-easing
|No|easeInOutQuad
|The easing function. You can create your custom easing. Yes!
Callback
<button
data-anchor=".container"
data-anchor-callback="done"
>
Our clients
</button>
var anchor = new Anchor();
anchor.init();
function done() {
alert('Scroll reached the target!');
}
Easing
You can create your custom easing: Click here to create
<button
data-anchor=".container"
data-anchor-easing="myCustomEasing"
>
Our clients
</button>
var anchor = new Anchor({
easings: {
// Example with 'back in quartic' easing
myCustomEasing: function(t, b, c, d) {
var ts=(t/=d)*t;
var tc=ts*t;
return b+c*(2*ts*ts + 2*tc + -3*ts);
}
}
});
anchor.init();
License
MIT.
Did you like it? Fork and contribute ;)
Made with :heart: