{"id":13536019,"url":"https://github.com/rigor789/vue-scrollTo","last_synced_at":"2025-04-02T02:32:03.822Z","repository":{"id":7003920,"uuid":"55913375","full_name":"rigor789/vue-scrollto","owner":"rigor789","description":"Adds a directive that listens for click events and scrolls to elements.","archived":false,"fork":false,"pushed_at":"2023-08-16T09:34:20.000Z","size":4436,"stargazers_count":2071,"open_issues_count":80,"forks_count":99,"subscribers_count":16,"default_branch":"main","last_synced_at":"2024-10-29T14:59:52.073Z","etag":null,"topics":["directive","easings","nuxt-module","request-animation-frame","vue","vue-plugin","vuejs"],"latest_commit_sha":null,"homepage":"https://vue-scrollto.rigor789.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rigor789.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-04-10T17:40:10.000Z","updated_at":"2024-10-29T11:44:20.000Z","dependencies_parsed_at":"2024-01-18T03:48:20.809Z","dependency_job_id":null,"html_url":"https://github.com/rigor789/vue-scrollto","commit_stats":{"total_commits":490,"total_committers":34,"mean_commits":"14.411764705882353","dds":0.4061224489795918,"last_synced_commit":"3ea3cfa84de925b7cbda9fde0cdbc6d4d082e8ee"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rigor789%2Fvue-scrollto","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rigor789%2Fvue-scrollto/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rigor789%2Fvue-scrollto/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rigor789%2Fvue-scrollto/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rigor789","download_url":"https://codeload.github.com/rigor789/vue-scrollto/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246743813,"owners_count":20826611,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["directive","easings","nuxt-module","request-animation-frame","vue","vue-plugin","vuejs"],"created_at":"2024-08-01T09:00:33.703Z","updated_at":"2025-04-02T02:32:03.476Z","avatar_url":"https://github.com/rigor789.png","language":"JavaScript","readme":"# vue-scrollto\n\n[![Vue 2.x](https://img.shields.io/badge/Vue-2.x-brightgreen.svg)](https://vuejs.org/v2/guide/)\n[![Vue 3.x](https://img.shields.io/badge/Vue-3.x-blueviolet.svg)](https://v3.vuejs.org/guide/introduction.html)\n[![npm](https://img.shields.io/npm/v/vue-scrollto.svg)](https://www.npmjs.com/package/vue-scrollto)\n[![npm-downloads](https://img.shields.io/npm/dm/vue-scrollto.svg)](https://www.npmjs.com/package/vue-scrollto)\n[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/rigor789/vue-scrollto/blob/master/LICENSE)\n\n[DEMO](https://vue-scrollto.rigor789.com/examples)\n\nScrolling to elements was never this easy!\n\nThis is for `vue 2.x` and `vue 3.x` (since [`v2.19.0`](https://github.com/rigor789/vue-scrollto/releases/tag/v2.19.0))\n\nFor `vue 1.x` use `vue-scrollTo@1.0.1` (note the capital T) but keep in mind that the old version depends on `jquery`.\n\n## Under the hood\n\n`vue-scrollto` uses `window.requestAnimationFrame` to perform the animations, thus giving the best performance.\n\nEasing is done using [bezier-easing](https://github.com/gre/bezier-easing) - A well tested easing micro-library.\n\n\u003cp class=\"tip\"\u003e\nIt even knows when the user interrupts, and doesn't force scrolling that would result in bad UX.\n\u003c/p\u003e\n\n## Installing\n\nThis package is available on npm.\n\n\u003cp class=\"warning\"\u003e\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\u003c/p\u003e\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\u003cscript src=\"https://cdn.jsdelivr.net/npm/vue\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vue-scrollto\"\u003e\u003c/script\u003e\n```\n\u003cp class=\"tip\"\u003e\n    When including it in html, it will automatically call `Vue.use` and also set a `VueScrollTo` variable that you can use!\n\u003c/p\u003e\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\n\u003ca href=\"#\" v-scroll-to=\"'#element'\"\u003eScroll to #element\u003c/a\u003e\n\n\u003cdiv id=\"element\"\u003e\n    Hi. I'm #element.\n\u003c/div\u003e\n```\n\nIf you need to customize the scrolling options, you can pass in an object literal to the directive:\n\n```html\n\u003ca href=\"#\" v-scroll-to=\"{\n     el: '#element',\n     container: '#container',\n     duration: 500,\n     lazy: false\n     easing: 'linear',\n     offset: -200,\n     force: true,\n     cancelable: true,\n     onStart: onStart,\n     onDone: onDone,\n     onCancel: onCancel,\n     x: false,\n     y: true\n }\"\u003e\n    Scroll to #element\n\u003c/a\u003e\n```\n\n\u003cp class=\"tip\"\u003e\n    Check out the Options section for more details about the available options.\n\u003c/p\u003e\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\u003ch2 id=\"easing-detailed\"\u003eEasing\u003c/h2\u003e\n\nEasing is calculated using [bezier-easing](https://github.com/gre/bezier-easing) so you can pass your own values into `options.easing` in the form of an array with 4 values, or you can use any of the default easings by referencing their names as strings (`ease`, `linear`, `ease-in`, `ease-out`, `ease-in-out`).\n\nvue-scrollto uses the following values for the default easings:\n```js\nlet easings = {\n    'ease': [0.25, 0.1, 0.25, 1.0],\n    'linear': [0.00, 0.0, 1.00, 1.0],\n    'ease-in': [0.42, 0.0, 1.00, 1.0],\n    'ease-out': [0.00, 0.0, 0.58, 1.0],\n    'ease-in-out': [0.42, 0.0, 0.58, 1.0]\n}\n```\n\n## Simultaneous Scrolling\n\nIf you need to scroll multiple containers simultaneously, you can import the scroller factory directly and create multiple instances. (Using the default `scrollTo` methods allows for only one scroll action at a time for performance reasons.)\n\n```js\nimport {scroller} from 'vue-scrollto/src/scrollTo'\nconst firstScrollTo = scroller()\nconst secondScrollTo = scroller()\nfirstScrollTo('#el1')\nsecondScrollTo('#el2')\n```\n\n## License\n\nMIT\n","funding_links":[],"categories":["实用库","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","UI实用程序","Components \u0026 Libraries","UI Utilities [🔝](#readme)","UI Utilities"],"sub_categories":["Libraries \u0026 Plugins","滚动","UI Utilities","Scroll"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frigor789%2Fvue-scrollTo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frigor789%2Fvue-scrollTo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frigor789%2Fvue-scrollTo/lists"}