vue-scrollto

What is vue-scrollto?

vue-scrollto is a Vue.js directive that allows you to smoothly scroll to elements within your application. It provides a simple and flexible way to implement scrolling animations, making it easier to navigate through different sections of a page.

What are vue-scrollto's main functionalities?

Basic Usage

This feature allows you to scroll to a specific element on the page by using the v-scroll-to directive. In this example, clicking the button will smoothly scroll to the element with the id 'element'.

<template>
  <div>
    <button v-scroll-to="'#element'">Scroll to Element</button>
    <div id="element" style="margin-top: 1000px;">Target Element</div>
  </div>
</template>

<script>
import VueScrollTo from 'vue-scrollto';

export default {
  directives: {
    scrollTo: VueScrollTo.directive
  }
};
</script>

Custom Duration

This feature allows you to customize the duration of the scroll animation. In this example, the scroll to the target element will take 1000 milliseconds (1 second).

<template>
  <div>
    <button v-scroll-to="{ el: '#element', duration: 1000 }">Scroll to Element</button>
    <div id="element" style="margin-top: 1000px;">Target Element</div>
  </div>
</template>

<script>
import VueScrollTo from 'vue-scrollto';

export default {
  directives: {
    scrollTo: VueScrollTo.directive
  }
};
</script>

Offset

This feature allows you to set an offset for the scroll position. In this example, the scroll will stop 50 pixels before the target element.

<template>
  <div>
    <button v-scroll-to="{ el: '#element', offset: -50 }">Scroll to Element</button>
    <div id="element" style="margin-top: 1000px;">Target Element</div>
  </div>
</template>

<script>
import VueScrollTo from 'vue-scrollto';

export default {
  directives: {
    scrollTo: VueScrollTo.directive
  }
};
</script>

Easing

This feature allows you to specify an easing function for the scroll animation. In this example, the 'ease-in-out' easing function is used to create a smooth scroll effect.

<template>
  <div>
    <button v-scroll-to="{ el: '#element', easing: 'ease-in-out' }">Scroll to Element</button>
    <div id="element" style="margin-top: 1000px;">Target Element</div>
  </div>
</template>

<script>
import VueScrollTo from 'vue-scrollto';

export default {
  directives: {
    scrollTo: VueScrollTo.directive
  }
};
</script>

Other packages similar to vue-scrollto

vue-scroll

vue-scroll is another Vue.js directive for smooth scrolling. It offers similar functionality to vue-scrollto but with a different API. It allows you to scroll to elements with various options for duration, offset, and easing.

vue-scroll-behavior

vue-scroll-behavior is a Vue.js plugin that provides smooth scrolling behavior for route navigation. It is more focused on handling scroll positions when navigating between different routes in a Vue application, whereas vue-scrollto is more general-purpose.

vue-smooth-scroll

vue-smooth-scroll is a lightweight Vue.js plugin for smooth scrolling to elements. It offers basic smooth scrolling functionality with a simple API, similar to vue-scrollto, but with fewer customization options.

README

vue-scrollto

DEMO

This is a Vue.js 2.x 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.

Since v2.5.0 it supports scrolling inside containers.

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', container: '#container', 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 = {
    container: '#container',
    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