vue-scrollto — плавная прокрутка к любому элементу в VueJS

Инструмент, который поможет Вам легко создать плавную прокрутку к указанному элементу на странице. Поддержка как в виде директивы, так и прямого применения в коде.

Описание плагина

vue-scrollto использует window.requestAnimationFrame для выполнения анимации, тем самым давая лучшую производительность. Плавность выполняется с помощью bezier-easing — хорошо протестированной облегчающей микро-библиотеки. Инструмент даже знает, когда пользователь прерывает прокрутку, что приводит к хорошему UX.

Установка

npm install --save vue-scrollto

Или непосредственно включить его в html:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-scrollto"></script>

Использование

vue-scrollto может использоваться как директива vue, так и программно из javascript.

Как директива vue:

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,
     force: true,
     cancelable: true,
     onStart: false,
     onDone: false,
     onCancel: false,
     x: false,
     y: true
 })

В случае, если вы используете версию браузера (непосредственно включая скрипт на Вашей странице), вы можете установить значения по умолчанию с помощью:

VueScrollTo.setDefaults({
    container: "body",
    duration: 500,
    easing: "ease",
    offset: 0,
    force: true,
    cancelable: true,
    onStart: false,
    onDone: false,
    onCancel: false,
    x: false,
    y: true
})

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

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

Если необходимо настроить параметры прокрутки, можно передать в директиву литерал объекта:

<a href="#" v-scroll-to="{
     el: '#element',
     container: '#container',
     duration: 500,
     easing: 'linear',
     offset: -200,
     force: true,
     cancelable: true,
     onStart: onStart,
     onDone: onDone,
     onCancel: onCancel,
     x: false,
     y: true
 }">
    Scroll to #element
</a>

Программно

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

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

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
cancelScroll()

На этому все. Использование плагина не составляет труда. Дополнительное описание параметров можно найти на странице источника.