1.1.0 • Published 8 years ago
js.anchor v1.1.0
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: