Инструмент, который поможет Вам легко создать плавную прокрутку к указанному элементу на странице. Поддержка как в виде директивы, так и прямого применения в коде.
Описание плагина
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()
На этому все. Использование плагина не составляет труда. Дополнительное описание параметров можно найти на странице источника.