{"id":20987781,"url":"https://github.com/scrivito/scroll-to-fragment","last_synced_at":"2025-05-14T18:31:04.693Z","repository":{"id":37908136,"uuid":"244956491","full_name":"Scrivito/scroll-to-fragment","owner":"Scrivito","description":"#️⃣Make single page apps scroll according to the current URL hash.","archived":false,"fork":false,"pushed_at":"2024-10-10T19:22:25.000Z","size":1416,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-30T04:55:36.953Z","etag":null,"topics":["anchor","fragment","hash","link","observe","scroll","spa"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/Scrivito.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}},"created_at":"2020-03-04T17:01:57.000Z","updated_at":"2024-10-22T08:32:59.000Z","dependencies_parsed_at":"2023-02-15T08:01:36.526Z","dependency_job_id":"2ad18624-dc37-4d83-8e69-210c50eed6a3","html_url":"https://github.com/Scrivito/scroll-to-fragment","commit_stats":{"total_commits":73,"total_committers":5,"mean_commits":14.6,"dds":"0.36986301369863017","last_synced_commit":"d5bf789727b03710f434d359e0423ca2bd1df571"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Scrivito%2Fscroll-to-fragment","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Scrivito%2Fscroll-to-fragment/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Scrivito%2Fscroll-to-fragment/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Scrivito%2Fscroll-to-fragment/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Scrivito","download_url":"https://codeload.github.com/Scrivito/scroll-to-fragment/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225303949,"owners_count":17453040,"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":["anchor","fragment","hash","link","observe","scroll","spa"],"created_at":"2024-11-19T06:18:09.938Z","updated_at":"2025-05-14T18:31:04.681Z","avatar_url":"https://github.com/Scrivito.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Scroll to fragment\n\n[![Build status](https://travis-ci.org/Scrivito/scroll-to-fragment.svg?branch=master)](https://travis-ci.org/github/Scrivito/scroll-to-fragment)\n[![Package size](https://badgen.net/bundlephobia/minzip/scroll-to-fragment)](https://bundlephobia.com/result?p=scroll-to-fragment)\n[![NPM Version](https://badgen.net/npm/v/scroll-to-fragment)](https://www.npmjs.com/package/scroll-to-fragment)\n[![Types included](https://badgen.net/npm/types/scroll-to-fragment)](https://www.npmjs.com/package/scroll-to-fragment)\n[![Supported by Scrivito](https://badgen.net/badge/%E2%99%A5%20supported%20by/Scrivito/1BAE61)](https://www.scrivito.com/?utm_source=npm\u0026utm_medium=natural\u0026utm_campaign=scroll-to-fragment)\n\nMake single page apps scroll to the current URL hash.\n\nWhen you follow a link that ends with a hash fragment (https://example.com#my-headline) on a traditional server-side-rendered (SSR) website, the browser automatically scrolls to the matching element.\nWith JavaScript-driven single page apps (SPA), current browsers do not scroll by default.\n\nThis helper provides single page apps with the classic scrolling behavior.\nIt updates the scroll position on load, and checks for updates on clicks and browser history changes.\nTo keep the fragment in line with asynchronously updated content (for example in a ReactJS based app) it also adjusts the scroll position on DOM changes.\n\n## Installation\n\n```sh\nnpm install scroll-to-fragment\n```\n\n## Usage\n\nIn your app's initialization code, for example in `index.js`:\n\n```js\nimport { scrollToFragment } from \"scroll-to-fragment\";\n\nscrollToFragment();\n```\n\n### Options\n\nYou can customize the behavior with the following options:\n\n```js\nimport { scrollToFragment } from \"scroll-to-fragment\";\nimport { createBrowserHistory } from \"history\";\n\nscrollToFragment({\n  // customize the target of a given fragment ID (default is getElementById):\n  getElement: (fragmentId) =\u003e document.getElementsByName(fragmentId)[0],\n\n  // adjust the scroll position after history PUSH events:\n  history: createBrowserHistory(),\n\n  // customize scrolling behavior:\n  scrollIntoView: (element) =\u003e element.scrollIntoView({ behavior: \"smooth\" }),\n});\n```\n\n### Manual trigger\n\nIf you are listening for any other events to trigger a scroll position update, simply call `scrollToFragment()` again. This will automatically stop the previous instance.\n\n### Stopping\n\nIf you want to remove all listeners and observers set up by `scrollToFragment()`, you can call:\n\n```js\nimport { stopScrollToFragment } from \"scroll-to-fragment\";\n\nstopScrollToFragment();\n```\n\n## Tips\n\n- Triggering an update on `popstate` or `hashchange` may result in unwanted scrolling after browser back and forward navigation.\n- If the scroll position after navigating back is wrong, we recommend using a dedicated package like [delayed-scroll-restoration-polyfill](https://github.com/janpaul123/delayed-scroll-restoration-polyfill).\n\n## Development\n\n```sh\nnpm run watch\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscrivito%2Fscroll-to-fragment","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscrivito%2Fscroll-to-fragment","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscrivito%2Fscroll-to-fragment/lists"}