vue-scrollto-folk
v2.6.9
Published
Folk from https://github.com/rigor789/vue-scrollto. Adds a directive that listens for click events and scrolls to elements.
Downloads
4
Maintainers
Readme
vue-scrollto
Scrolling to elements was never this easy!
This is for vue 2.x
For vue 1.x
use [email protected]
(note the capital T) but keep in mind that the old version depends on jquery
.
Under the hood
vue-scrollto
uses window.requestAnimationFrame
to perform the animations, thus giving the best performance.
Easing is done using bezier-easing - A well tested easing micro-library.
Installing
This package is available on npm.
Using npm:
npm install --save vue-scrollto
Using yarn:
yarn add vue-scrollto
Directly include it in html:
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/vue-scrollto"></script>
Usage
vue-scrollto can be used either as a vue directive, or programatically from your javascript.
As a vue directive
var Vue = require('vue');
var VueScrollTo = require('vue-scrollto');
Vue.use(VueScrollTo)
// You can also pass in the default options
Vue.use(VueScrollTo, {
container: "body",
duration: 500,
easing: "ease",
offset: 0,
onDone: false,
onCancel: false
})
In case you are using the browser version (directly including the script on your page), you can set the defaults with
VueScrollTo.setDefaults({
container: "body",
duration: 500,
easing: "ease",
offset: 0,
onDone: false,
onCancel: false
})
<a href="#" v-scroll-to="'#element'">Scroll to #element</a>
<div id="element">
Hi. I'm #element.
</div>
If you need to customize the scrolling options, you can pass in an object literal to the directive:
<a href="#" v-scroll-to="{
el: '#element',
container: '#container',
duration: 500,
easing: 'linear',
offset: -200,
onDone: onDone,
onCancel: onCancel
}">
Scroll to #element
</a>
Programatically
var VueScrollTo = require('vue-scrollto');
var options = {
container: '#container',
easing: 'ease-in',
offset: -60,
onDone: function() {
// scrolling is done
},
onCancel: function() {
// scrolling has been interrupted
}
}
VueScrollTo.scrollTo(element, duration, options)
// or alternatively inside your components you can use
this.$scrollTo(element, duration, options)
Options
el / element
The element you want to scroll to.
container
The container that has to be scrolled.
Default: body
duration
The duration (in milliseconds) of the scrolling animation.
Default: 500
easing
The easing to be used when animating. Read more in the Easing section.
Default: ease
offset
The offset that should be applied when scrolling.
Default: 0
onDone
A callback function that should be called when scrolling has ended.
Default: noop
onCancel
A callback function that should be called when scrolling has been aborted by the user (user scrolled, clicked etc.).
Default: noop
Easing
Easing is calculated using bezier-easing so you can pass your own values into options.easing
in the form of an array with 4 values, or you can use any of the default easings by referencing their names as strings (ease
, linear
, ease-in
, ease-out
, ease-in-out
).
vue-scrollto uses the following values for the default easings:
let easings = {
'ease': [0.25, 0.1, 0.25, 1.0],
'linear': [0.00, 0.0, 1.00, 1.0],
'ease-in': [0.42, 0.0, 1.00, 1.0],
'ease-out': [0.00, 0.0, 0.58, 1.0],
'ease-in-out': [0.42, 0.0, 0.58, 1.0]
}
License
MIT