Branch: master
Clone or download
Latest commit 4142150 Nov 20, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE Update Sep 5, 2018
build support umd May 25, 2018
docs-src fix: support IE 11 Jul 23, 2018
docs fix: support IE 11 Jul 23, 2018
src fix: support IE 11 Jul 23, 2018
.babelrc fix: support IE 11 Jul 23, 2018
.eslintrc Add scroll-spy-active and scroll-spy-link directives Dec 18, 2017
.gitignore feat: allow to set body to scroll container Dec 7, 2016
.npmignore Fix npm package by removing /dist/* from .npmignore Dec 22, 2017
LICENSE add LICENSE Apr 14, 2017 Update Nov 20, 2018
package-lock.json 2.3.1 Jul 23, 2018
package.json 2.3.1 Jul 23, 2018


Vue 2.x npm npm-downloades npm bundle size (minified + gzip) license

Scrollspy, and animated scroll-to, for Vue2, inspired by vue-scrollspy. See or Jsfiddle.



$ npm install vue2-scrollspy --save


<script src="//"></script>

Basic Usage

import Vue from 'vue';
import Scrollspy from 'vue2-scrollspy';
// use default options

// or custom options
Vue.use(Scrollspy, options);
<ul v-scroll-spy-active v-scroll-spy-link>
        <a>Menu 1</a>
        <a>Menu 2</a>

<div v-scroll-spy>
        <h1>Header 1</h1>
        <h1>Header 2</h1>

Old Browsers

Old Browsers like IE11:

import Scrollspy from "vue2-scrollspy/dist/index";



Declares container of sections for elements to scrollspy.

  1. v-scroll-spy="{data: 'section'}": add a section data property in scope Vue instance that is binded to the section index.

  2. v-scroll-spy="{allowNoActive: true}": allow no active sections when scroll position is outside of the scrollspy container. Default behavior is too keep active at least one section in any case.

  3. v-scroll-spy="{offset: 50}": add an offset for scroll and active events.

  4. v-scroll-spy="{time: 200, steps: 30}": set the animation options.

  5. $scrollTo(index: int) is provided on scope Vue instance to invoke a scroll to the given section index.

  6. v-section-selector: set section which should scrollto


Set the active css class on element that match the index of current scrollspy.

  1. v-scroll-spy-active="{selector: '', class: 'custom-active'}": customize elements selection and class name to apply. By default, it will use direct children and apply active class.


Add click handler on children elements that will scroll to the related section.

  1. v-scroll-spy-link="{selector: ''}": customize elements selection. By default, it will use a to select all links.

Bezier animations


import scrollSpy, { Easing } from 'vue2-scrollspy';

Vue.use(scrollSpy, {
  easing: Easing.Cubic.In

Easing options:


You should have the same number of children elements for v-scroll-spy, v-scroll-spy-active v-scroll-spy-link for directives to work properly.

If you need to share multiple scroll-spy in the same page, you can add data-scroll-spy-id="" on each element where a directive is declared.

If you want to set something else (not body) to scroll container, you could:

<div class="container" v-scroll-spy>
        <h1>Header 1</h1>
        <h1>Header 2</h1>
.container {
  position: relative;


npm i && npm run watch 
cd docs-src && npm i && npm run dev