vue-scrollto

DEMO

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