\nIt even knows when the user interrupts, and doesn't force scrolling that would result in bad UX.\n
\n\n## Installing\n\nThis package is available on npm.\n\n\n 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`\n
\n\nUsing npm:\n```bash\nnpm install --save vue-scrollto\n```\n\nUsing yarn:\n```bash\nyarn add vue-scrollto\n```\n\nDirectly include it in html:\n```html\n\n\n```\n\n When including it in html, it will automatically call `Vue.use` and also set a `VueScrollTo` variable that you can use!\n
\n\n## Nuxt.js\n\nAdd `vue-scrollto/nuxt` to modules section of `nuxt.config.js`\n\n```js\n{\n modules: [\n 'vue-scrollto/nuxt',\n\n // Or if you have custom options...\n ['vue-scrollto/nuxt', { duration: 300 }],\n ]\n}\n```\n\n## Usage\n\nvue-scrollto can be used either as a vue directive, or programatically from your javascript.\n\n### As a vue directive\n```js\nvar Vue = require('vue');\nvar VueScrollTo = require('vue-scrollto');\n\nVue.use(VueScrollTo)\n\n// You can also pass in the default options\nVue.use(VueScrollTo, {\n container: \"body\",\n duration: 500,\n easing: \"ease\",\n offset: 0,\n force: true,\n cancelable: true,\n onStart: false,\n onDone: false,\n onCancel: false,\n x: false,\n y: true\n })\n```\n\nIn case you are using the browser version (directly including the script on your page), you can set the defaults with\n \n```js\nVueScrollTo.setDefaults({\n container: \"body\",\n duration: 500,\n lazy: false,\n easing: \"ease\",\n offset: 0,\n force: true,\n cancelable: true,\n onStart: false,\n onDone: false,\n onCancel: false,\n x: false,\n y: true\n})\n```\n\n```html\nScroll to #element\n\n\n Check out the Options section for more details about the available options.\n
\n\n### Programmatically\n\n```js\nvar VueScrollTo = require('vue-scrollto');\n\nvar options = {\n container: '#container',\n easing: 'ease-in',\n lazy: false,\n offset: -60,\n force: true,\n cancelable: true,\n onStart: function(element) {\n // scrolling started\n },\n onDone: function(element) {\n // scrolling is done\n },\n onCancel: function() {\n // scrolling has been interrupted\n },\n x: false,\n y: true\n}\n\nvar cancelScroll = VueScrollTo.scrollTo(element, duration, options)\n\n// or alternatively inside your components you can use\ncancelScroll = this.$scrollTo(element, duration, options)\n\n// to cancel scrolling you can call the returned function\ncancelScroll()\n```\n\n## Options\n\n#### el / element \nThe element you want to scroll to.\n\n#### container\nThe container that has to be scrolled. \n\n*Default:* `body`\n\n#### duration\nThe duration (in milliseconds) of the scrolling animation. \n\n*Default:* `500` \n\n#### easing \nThe easing to be used when animating. Read more in the [Easing section](#easing-detailed). \n\n*Default:* `ease`\n\n#### lazy\nBy default targetX/targetY are calculated once at the start of a scroll, however if the target may shift around during the scroll - setting `lazy` to `false` will force recalculation of targetX/targetY at each scroll step.\n\n*Default:* `true` \n\n#### offset \nThe offset that should be applied when scrolling. This option accepts a callback function since `v2.8.0`. \n\n*Default:* `0`\n\n#### force\nIndicates if scrolling should be performed, even if the scroll target is already in view.\n\n*Default:* `true`\n\n#### cancelable\nIndicates if user can cancel the scroll or not.\n\n*Default:* `true`\n\n#### onStart\nA callback function that should be called when scrolling has started. Receives the target element as a parameter.\n\n*Default:* `noop`\n\n#### onDone \nA callback function that should be called when scrolling has ended. Receives the target element as a parameter.\n\n*Default:* `noop`\n\n#### onCancel \nA callback function that should be called when scrolling has been aborted by the user (user scrolled, clicked etc.). Receives the abort event and the target element as parameters.\n \n*Default:* `noop`\n\n#### x \nWhether or not we want scrolling on the `x` axis\n \n*Default:* `false`\n\n#### y \nWhether or not we want scrolling on the `y` axis\n \n*Default:* `true`\n\n\n