Scrolling to elements was never this easy!

Scroll to any element on page,Scroll inside any container,Customize how scrolling behaves.

Live Demo

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.

It even knows when the user interrupts, and doesn't force scrolling that would result in bad UX.


This package is available on npm.

If you used this package before, please ensure you are using the right one, since it has been renamed from `vue-scrollTo` to `vue-scrollto`

Using npm:

npm install --save vue-scrollto

Using yarn:

yarn add vue-scrollto

Directly include it in html:

<script src="[email protected]"></script>
<script src=""></script>

When including it in html, it will automatically call `Vue.use` and also set a `VueScrollTo` variable that you can use!


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');


// You can also pass in the default options
Vue.use(VueScrollTo, {
     container: "body",
     duration: 500,
     easing: "ease",
     offset: 0,
     cancelable: true,
     onDone: false,
     onCancel: false,
     x: true,
     y: false

In case you are using the browser version (directly including the script on your page), you can set the defaults with

    container: "body",
    duration: 500,
    easing: "ease",
    offset: 0,
    cancelable: true,
    onDone: false,
    onCancel: false,
    x: true,
    y: false
<a href="#" v-scroll-to="'#element'">Scroll to #element</a>

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

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,
     cancelable: true
     onDone: onDone,
     onCancel: onCancel,
     x: true,
     y: false
    Scroll to #element

Check out the [Options Section](#options) for more details about the available options.


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

var options = {
    container: '#container',
    easing: 'ease-in',
    offset: -60,
    cancelable: true,
    onDone: function() {
      // scrolling is done
    onCancel: function() {
      // scrolling has been interrupted
    x: true,
    y: false

var cancelScroll = VueScrollTo.scrollTo(element, duration, options)

// or alternatively inside your components you can use
cancelScroll = this.$scrollTo(element, duration, options)

// to cancel scrolling you can call the returned function


el / element

The element you want to scroll to.


The container that has to be scrolled.

Default: body


The duration (in milliseconds) of the scrolling animation.

Default: 500


The easing to be used when animating. Read more in the Easing section.

Default: ease


The offset that should be applied when scrolling.

Default: 0


Indicates if user can cancel the scroll or not.

Default: true


A callback function that should be called when scrolling has ended.

Default: noop


A callback function that should be called when scrolling has been aborted by the user (user scrolled, clicked etc.).

Default: noop


Whether or not we want scrolling on the x axis

Default: true


Whether or not we want scrolling on the y axis

Default: false


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]