{"id":16788747,"url":"https://github.com/markmead/alpinejs-scroll-to","last_synced_at":"2025-09-07T20:12:08.412Z","repository":{"id":98519316,"uuid":"557896993","full_name":"markmead/alpinejs-scroll-to","owner":"markmead","description":"Easily add scroll to functionality with options, powered by Alpine JS 🐭","archived":false,"fork":false,"pushed_at":"2025-03-07T08:14:40.000Z","size":25,"stargazers_count":17,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-27T06:49:52.244Z","etag":null,"topics":["alpine-js","alpinejs","alpinejs-plugin","javascript","scroll-to","scrollto"],"latest_commit_sha":null,"homepage":"https://js.hyperui.dev/examples/utility-scroll-to","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/markmead.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,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-10-26T14:05:59.000Z","updated_at":"2025-03-07T08:14:43.000Z","dependencies_parsed_at":null,"dependency_job_id":"b5b8c50a-19a3-4c65-a439-dd611ec98395","html_url":"https://github.com/markmead/alpinejs-scroll-to","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"markmead/alpinejs-plugin-template","purl":"pkg:github/markmead/alpinejs-scroll-to","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmead%2Falpinejs-scroll-to","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmead%2Falpinejs-scroll-to/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmead%2Falpinejs-scroll-to/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmead%2Falpinejs-scroll-to/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/markmead","download_url":"https://codeload.github.com/markmead/alpinejs-scroll-to/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmead%2Falpinejs-scroll-to/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274088625,"owners_count":25220260,"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","status":"online","status_checked_at":"2025-09-07T02:00:09.463Z","response_time":67,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["alpine-js","alpinejs","alpinejs-plugin","javascript","scroll-to","scrollto"],"created_at":"2024-10-13T08:24:36.862Z","updated_at":"2025-09-07T20:12:08.390Z","avatar_url":"https://github.com/markmead.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Alpine JS Scroll To\n\nEasily add scroll to functionality with options, powered by Alpine JS 🐭\n\n## Install\n\n### With a CDN\n\n```html\n\u003cscript\n  defer\n  src=\"https://unpkg.com/alpinejs-scroll-to@latest/dist/scroll-to.min.js\"\n\u003e\u003c/script\u003e\n\n\u003cscript defer src=\"https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js\"\u003e\u003c/script\u003e\n```\n\n### With a Package Manager\n\n```shell\nyarn add -D alpinejs-scroll-to\n\nnpm install -D alpinejs-scroll-to\n```\n\n```js\nimport Alpine from 'alpinejs'\nimport scrollTo from 'alpinejs-scroll-to'\n\nAlpine.plugin(scrollTo)\n\nAlpine.start()\n```\n\n## Example\n\n```html\n\u003c!-- This will scroll to `#AboutContent` on Alpine init --\u003e\n\u003cdiv x-data x-init=\"$scrollTo({ targetId: 'AboutContent' })\"\u003e\n  \u003cheader x-scroll-to-header class=\"fixed h-20 top-0 inset-x-0 z-50 \"\u003e\n    ...\n  \u003c/header\u003e\n\n  \u003cdiv\u003e\n    \u003cnav\u003e\n      \u003c!--\n        This will scroll to `#AboutContent` when clicked with smooth scrolling\n        disabled and the header height will be offset meaning no overlap\n      --\u003e\n      \u003ca\n        href=\"#AboutContent\"\n        x-on:click.prevent=\"$scrollTo({ offsetHeader: true, useSmooth: false })\"\n      \u003e\n        About\n      \u003c/a\u003e\n\n      \u003c!--\n        This will scroll to `#TeamContent` when clicked with smooth scrolling\n        enabled but the header height will not be offset meaning overlap\n      --\u003e\n      \u003ca href=\"#TeamContent\" x-on:click.prevent=\"$scrollTo\"\u003e Team \u003c/a\u003e\n    \u003c/nav\u003e\n\n    \u003cdiv class=\"my-[100vh]\"\u003e\n      \u003cdiv id=\"AboutContent\"\u003e About \u003c/div\u003e\n\n      \u003cdiv id=\"TeamContent\"\u003e Team \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Options\n\n**`targetId`**\n\nThis expects the `id` of an element to scroll to without the `#`.\n\nUseful for when you aren't triggering the scroll to from an anchor tag.\n\n**`offsetHeader`**\n\nBy default this is `false`.\n\nSetting this to `true` will offset the height of the header element when you\nscroll. No more overlap!\n\nYou target the header element by applying `x-scroll-to-header` to it.\n\n```html\n\u003cheader x-scroll-to-header class=\"fixed h-20 top-0 inset-x-0 z-50\"\u003e\n  ...\n\u003c/header\u003e\n```\n\n**`useSmooth`**\n\nBy default this is `true`.\n\nSetting this to `false` will remove the smooth scroll, instead it will be\ninstant.\n\n## Stats\n\n![](https://img.shields.io/bundlephobia/min/alpinejs-scroll-to)\n![](https://img.shields.io/npm/v/alpinejs-scroll-to)\n![](https://img.shields.io/npm/dt/alpinejs-scroll-to)\n![](https://img.shields.io/github/license/markmead/alpinejs-scroll-to)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkmead%2Falpinejs-scroll-to","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarkmead%2Falpinejs-scroll-to","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkmead%2Falpinejs-scroll-to/lists"}