rivvid / vue-scrollto

Adds a directive that listens for click events and scrolls to elements.

vue-scrollto

DEMO

This is a Vue.js directive that can scroll to elements on the page.

Since v2.1.0 it doesn't require jQuery anymore, instead it uses window.requestAnimationFrame and bezier-easing for easing.

The package exposes some functions that you can use programatically.

Install

With npm do:

$ npm install vue-scrollto --save

Note: The package used to be named vue-scrollTo with a capital T, but due to limited support for mixed case in npm, it has been renamed to a lowercase name.

Usage

As a directive

var Vue = require('vue');
var vueScrollto = require('vue-scrollto');
Vue.use(vueScrollto);

<a href="#" v-scroll-to="'#element'">Scroll to #element</a>

<div id="element">
    Hi. I'm element.
</div>

You can also use an object literal to pass in options:

<a href="#" v-scroll-to="{ el: '#element', duration: 500, easing: 'linear', offset: -200, onDone: onDone, onCancel: onCancel}">
    Scroll to #element
</a>

Note on easing: you can use the easings included, or you can specify your own in the form of easing: [.6, -.80, .30, 1.9]

Programatically

var vueScrollto = require('vue-scrollto');

var options = {
    easing: vueScrollto.easing['ease-in'],
    offset: -60,
    onDone: function() {
      // scrolling is done
    },
    onCancel: function() {
      // scrolling has been interrupted
    }
}

vueScrollto.scrollTo(element, duration, options)

Customize easing

Easing is done with bezier-easing so you can pass your own values into options.easing. It expects an array with exactly 4 values.

Here are the easings included by default:

exports.easing = {
    '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