{"id":15024811,"url":"https://github.com/developmint/vue-next-level-scroll","last_synced_at":"2025-04-09T13:08:13.168Z","repository":{"id":32396976,"uuid":"132484109","full_name":"Developmint/vue-next-level-scroll","owner":"Developmint","description":"Bring your scroll game to the next level!","archived":false,"fork":false,"pushed_at":"2025-04-04T19:50:28.000Z","size":34,"stargazers_count":49,"open_issues_count":13,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-09T13:08:05.114Z","etag":null,"topics":["scroll","vue","vue-component","vuejs2"],"latest_commit_sha":null,"homepage":null,"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/Developmint.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["manniL"],"custom":["https://www.lichter.io/support-me/"]}},"created_at":"2018-05-07T15:57:19.000Z","updated_at":"2024-04-05T05:54:18.000Z","dependencies_parsed_at":"2023-10-23T09:31:43.957Z","dependency_job_id":"de1f0233-fef2-4da6-9fb9-93261baa1262","html_url":"https://github.com/Developmint/vue-next-level-scroll","commit_stats":{"total_commits":34,"total_committers":3,"mean_commits":"11.333333333333334","dds":"0.20588235294117652","last_synced_commit":"7bcd144cfd1d75504a11a87faf167499ca43bb9f"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Developmint%2Fvue-next-level-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Developmint%2Fvue-next-level-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Developmint%2Fvue-next-level-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Developmint%2Fvue-next-level-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Developmint","download_url":"https://codeload.github.com/Developmint/vue-next-level-scroll/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248045233,"owners_count":21038553,"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":["scroll","vue","vue-component","vuejs2"],"created_at":"2024-09-24T20:01:00.294Z","updated_at":"2025-04-09T13:08:13.119Z","avatar_url":"https://github.com/Developmint.png","language":"JavaScript","readme":"# VueNextLevelScroll - Bring your scroll game to the next level!\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://travis-ci.com/Developmint/vue-next-level-scroll\"\u003e\u003cimg src=\"https://travis-ci.com/Developmint/vue-next-level-scroll.svg?branch=master\" alt=\"Build Status\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://codecov.io/gh/Developmint/vue-next-level-scroll\"\u003e\u003cimg src=\"https://codecov.io/gh/Developmint/vue-next-level-scroll/branch/master/graph/badge.svg\" alt=\"Code coverage\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue-next-level-scroll\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/vue-next-level-scroll.svg\" alt=\"Downloads\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue-next-level-scroll\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/vue-next-level-scroll.svg\" alt=\"Version\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue-next-level-scroll\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/vue-next-level-scroll.svg\" alt=\"License\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://conventionalcommits.org\"\u003e\u003cimg src=\"https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg\" alt=\"We use Conventional Commits\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://thanks.lichter.io/\"\u003e\u003cimg src=\"https://img.shields.io/badge/thanks-%E2%99%A5-ff69b4.svg\" alt=\"Thanks badge\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003e \"Click to scroll\" **component** using the modern Browser API.\n\n## :fire:  Features\n\n- Just **one tiny file**\n- Component based (great for **async loading** and code splitting)\n- Supports navigation through *VueRouter*\n- Universal code/SSR-safe\n- Well tested and **documented**\n- Compatible with Node 8.0+\n- Vue as the only dependency\n- Highly customizable\n\n## :mag_right: Getting started\n\n### :star: Demo\n\nA live demo is available at [https://oqxy5xr5ny.sse.codesandbox.io/](https://oqxy5xr5ny.sse.codesandbox.io/).\n\n### :package: Through NPM\n\n```\n$ npm install vue-next-level-scroll\n```\n\n#### Synchronous import\n\n```js\nimport VueNextLevelScroll from 'vue-next-level-scroll'\n\n\nexport default {\n  components: {\n    VueNextLevelScroll\n  }\n}\n\n```\n\n#### Async import\n\n```js\nexport default {\n  components: {\n    VueNextLevelScroll: () =\u003e import('vue-next-level-scroll')\n  }\n}\n\n```\n\n### :link: Using a CDN\n\n[UNPKG](https://unpkg.com/vue-next-level-scroll/dist/) | [jsDelivr](https://cdn.jsdelivr.net/npm/vue-next-level-scroll/dist/) (available as window.nextLevelScroll)\n\n```js\nVue.component('scroll', window.nextLevelScroll)\n\n// Continue as you wish. If you want to load a scroll behavior polyfill, do it **before** adding the CDN link.\n\n```\n\n\n## :hammer_and_wrench: Usage\n\n### You might like to go for a Polyfill\n\nVueNextLevelScroll uses the new [`ScrollBehavior specification`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior) by default.\nUnfortunately, Firefox is the only browser that has it built-in (by now).\nFor this reason, you might like to go for [this polyfill](https://github.com/iamdustan/smoothscroll) (don't worry, less than 2kB after GZIP).\n\n\n### The component based approach\n\nAs you likely have seen, there are various *Vue directives* out their that handle scrolling as well.\nYou might have used one or two of them already or built one yourself.\n\n**But!** A component can sometimes be the better approach, as it can be tree shaken, is\nbetter suited for universal/SSR code and can be loaded asynchronously as well!\n\n### Prop overview\n\n\n| Prop | Optional? | Comment |\n|---| --- | --- |\n| target | :white_check_mark: | Can be any query selector you want (or a function that returns such). Will be passed to the scroll function |\n| tag | :white_check_mark: | Defaults to `div`. The HTML tag used for the VueNextLevelScroll component |\n| scrollFunction  | :white_check_mark: | You can define an own scroll function that will take the `target` prop as parameter and can do whatever you like. |\n| shouldNavigate  | :white_check_mark: | If set, VueRouter will reflect navigation changes in the url(top: no hash, target: hash)  |\n| navigationType  | :white_check_mark: | Defaults to `push`. The navigation type of that VueRouter should use. Usually either `push` or `replace` |\n\n\n### Default scroll function explained\n\n#### Scroll to top\n\nWhen no `target` prop is set, the default scroll function will trigger a scroll to top:\n\n```html\n\u003cvue-next-level-scroll\u003e\n  \u003cimg src=\"https://developmint.de/logo.png\"\u003e\n\u003c/vue-next-level-scroll\u003e\n```\n\n#### Scroll to query selector\n\nWhen the `target` prop is provided, the default scroll function look the DOM node up and smooth scroll to it.\nIf the `target` is a class query, the first found element will be chosen to scroll to.\n\n```html\n\u003cvue-next-level-scroll target=\"#my-target\"\u003e\n  \u003cimg src=\"https://developmint.de/logo.png\"\u003e\n\u003c/vue-next-level-scroll\u003e\n\u003cdiv id=\"my-target\"/\u003e\n```\n\n#### Scroll to non-existing query selector\n\nWhen the `target` prop is given but no node matches, a console error will appear.\n\n```html\n\u003cvue-next-level-scroll target=\"#my-target\"\u003e\n  \u003cimg src=\"https://developmint.de/logo.png\"\u003e\n\u003c/vue-next-level-scroll\u003e\n\u003cdiv id=\"my-non-existing-target\"/\u003e\n```\n\n```js\nError: Could not scroll to #my-target\n```\n\n### Custom scroll function\n\nMost users are satisfied with the default scroll function provided by *VueNextLevelScroll*\nHowever if you need other behavior you can simply write your own function:\n\n```html\n\u003ctemplate\u003e\n    \u003cvue-next-level-scroll\n      target=\"#my-target\"\n      :scrollFunction=\"myScroll\"\u003e\n      \u003cimg src=\"https://developmint.de/logo.png\"\u003e\n    \u003c/vue-next-level-scroll\u003e\n    \u003cdiv id=\"my-non-existing-target\"/\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n methods: {\n   myScroll (target) { doSomeMagicHere(target) }\n  }\n}\n\u003c/script\u003e\n```\n\nYou might not need the polyfill then as well :wink:\n\n## :gear: Contributing\n\nPlease see our [CONTRIBUTING.md](./CONTRIBUTING.md)\n\n\n## :bookmark_tabs: License\n\n[MIT License](./LICENSE.md) - Copyright (c) Developmint - Alexander Lichter\n","funding_links":["https://github.com/sponsors/manniL","https://www.lichter.io/support-me/"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevelopmint%2Fvue-next-level-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevelopmint%2Fvue-next-level-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevelopmint%2Fvue-next-level-scroll/lists"}