{"id":26293124,"url":"https://github.com/fivefifteen/hashjump","last_synced_at":"2025-05-08T05:54:57.066Z","repository":{"id":113451993,"uuid":"609939122","full_name":"fivefifteen/hashjump","owner":"fivefifteen","description":"A tiny, dependency-free JavaScript module for handling anchor links and scrolling elements into view.","archived":false,"fork":false,"pushed_at":"2025-03-06T20:21:03.000Z","size":199,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-08T05:54:51.398Z","etag":null,"topics":["anchor","easing","frontend","javascript","no-dependencies","no-jquery","scrolling","vanilla-javascript","vanilla-js"],"latest_commit_sha":null,"homepage":"http://hashjump.js.org/","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/fivefifteen.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2023-03-05T17:26:33.000Z","updated_at":"2025-03-06T20:21:06.000Z","dependencies_parsed_at":"2025-03-15T01:40:28.040Z","dependency_job_id":"e2133f8f-3224-43c3-b35b-03b6e0cbaddc","html_url":"https://github.com/fivefifteen/hashjump","commit_stats":{"total_commits":11,"total_committers":1,"mean_commits":11.0,"dds":0.0,"last_synced_commit":"bdd01ef1a73af8589221c21159928f258dbc0460"},"previous_names":["fivefifteen/hashjump"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fivefifteen%2Fhashjump","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fivefifteen%2Fhashjump/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fivefifteen%2Fhashjump/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fivefifteen%2Fhashjump/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fivefifteen","download_url":"https://codeload.github.com/fivefifteen/hashjump/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253009851,"owners_count":21839713,"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","easing","frontend","javascript","no-dependencies","no-jquery","scrolling","vanilla-javascript","vanilla-js"],"created_at":"2025-03-15T01:40:20.732Z","updated_at":"2025-05-08T05:54:57.036Z","avatar_url":"https://github.com/fivefifteen.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n  \u003ca href=\"https://github.com/fivefifteen/hashjump\"\u003e\n    \u003cpicture\u003e\n      \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"./assets/hashjump-white.png\"\u003e\n      \u003cimg src=\"./assets/hashjump.png\" alt=\"HashJump\"\u003e\n    \u003c/picture\u003e\n  \u003c/a\u003e\n\n  # HashJump\n\n  A tiny, dependency-free, color input field helper that utilizes the native color picker.\n\n  [![npm package version](https://img.shields.io/npm/v/hashjump.svg?style=flat-square)](https://www.npmjs.com/package/hashjump)\n  [![npm package downloads](https://img.shields.io/npm/dt/hashjump.svg?style=flat-square)](https://www.npmjs.com/package/hashjumpp)\n  [![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/fivefifteen/hashjump?style=flat-square)](https://github.com/fivefifteen/hashjump)\n  [![code style](https://img.shields.io/badge/code_style-standard-yellow.svg?style=flat-square)](https://github.com/standard/standard)\n  [![license](https://img.shields.io/github/license/fivefifteen/hashjump.svg?style=flat-square)](license.md)\n\n  \u003ca href=\"https://fivefifteen.com\" target=\"_blank\"\u003e\u003cimg src=\"./assets/fivefifteen.png\" /\u003e\u003cbr /\u003e\u003cb\u003eA Five Fifteen Project\u003c/b\u003e\u003c/a\u003e\n\n\u003c/div\u003e\n\n\n## Features\n\n* Tiny (Around ~8kb minified)\n* Zero dependencies\n* Supports horizontal as well as vertical scrolling\n* Supports easing functions for scrolling animations (even custom ones so things like [d3-ease] are supported)\n* Supports custom functions for when anchor links are clicked or the page was visited with an anchor link\n* Scroll the window to bring your element to the center of the viewport (or any other position in the viewport)\n\n\n## Demo\n\nVisit https://hashjump.js.org\n\n\n## Installation\n\n\n### Manual Download\n\n[Download the latest version of hashjump](https://github.com/fivefifteen/hashjump/archive/refs/heads/main.zip) and then place the following HTML in your page's head element:\n\n```html\n\u003cscript type=\"text/javascript\" src=\"dist/hashjump.min.js\"\u003e\u003c/script\u003e\n```\n\n\n### CDN (Courtesy of [jsDelivr](https://jsdelivr.com))\n\nPlace the following HTML in your page's head element (check to make sure the version in the URL is the version you want):\n\n```html\n\u003cscript type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/gh/fivefifteen/hashjump@0.1/dist/hashjump.min.js\"\u003e\u003c/script\u003e\n```\n\n\n### [NPM](https://npmjs.com)\n\n```\nnpm install hashjump --save\n```\n\n```js\n// ES6\nimport hashjump from 'hashjump'\n// CommonJS\nconst hashjump = require('hashjump')\n```\n\n\n### [Fetcher](https://github.com/fivefifteen/fetcher)\n\n```\nfetcher install fivefifteen/hashjump --save\n```\n\n\n### [Bower](https://bower.io)\n\n```\nbower install fivefifteen/hashjump --save\n```\n\n\n## Usage\n\n\n### `hashjump` Function\n\n`hashjump([targetHashes], [opts])`\n\n`hashjump([opts])`\n\nInitializes HashJump for the defined `targetHashes` anchor links (or all anchor links if omitted). Sets page load and link click event handlers and saves `opts`.\n\n*Note: If running this function multiple times, you should always call any instances with `targetHashes` set before calling an instance without (global instance).*\n\n\n#### Parameters\n\n - `targetHashes` (Optional) - Accepts a string or an array of strings defining anchor links (minus the `#`) that should be targeted for this instance.\n \n - `opts` (Optional) - Accepts an object of options you can define to change the behavior of hashjump. ([See Options Section](#options))\n\n\n#### Examples\n\n```js\ndocument.addEventListener('DOMContentLoaded', function () {\n  hashjump('section-2', {\n    hideUrlHash: true,\n    focusElement: true\n  })\n\n  hashjump('section-4', {\n    easingFunction: function (t) { return d3.easeElasticInOut(t) },\n    scrollDuration: 2000,\n    scrollOffset: 'inner-50%'\n  })\n\n  hashjump({\n    actionAfter: function (info) { console.log(info) }\n  })\n})\n```\n\n\n### `hashjump.to` Function\n\n`hashjump.to([target], [opts])`\n\n`hashjump.to([opts])`\n\nScrolls to the specified `target`. Retains any `opts` that may have been previously set by the `hashjump()` init function but can be overwritten with the `opts` parameter.\n\n\n### Paramters\n\n - `target` - Accepts a string of the anchor link or element ID (minus the `#`), an instance of HTMLElement, or null to use the document body as the element to scroll to.\n\n - `opts` (Optional) - Accepts an object of options you can define to change the behavior of hashjump. ([See Options Section](#options))\n\n\n### Options\n\n#### action\n\nA function that will replace the scroll event and gets passed an object as the only parameter with some useful information about the instance ([See Action Info Section](#action-info)). Useful for performing an action other than scrolling to an element when an anchor link is clicked or visited.\n\n\n#### actionAfter\n\nA function that will be ran after the scroll event and gets passed an object as the only parameter with some useful information about the instance ([See Action Info Section](#action-info)).\n\n\n#### actionBefore\n\nA function that will be ran before the scroll event and gets passed an object as the only parameter with some useful information about the instance ([See Action Info Section](#action-info)). If this function returns `false`, the scroll event will not occur.\n\n\n#### focusElement\n\nDecides if the element should be focused after the scroll event or not. Accepts a selector string that is passed to `element.matches`, a custom function that is passed the element as it's only parameter and should return boolean, or a boolean.\n\n\n#### hashjumpLinks\n\nDecides if anchor links on the page should have `hashjumpLinkEvents` attached to them that runs the `hashjump.to()` function. Accepts a boolean.\n\n*Note: This option is only used by the `hashjump()` init function.*\n\n\n#### hashjumpLinkEvents\n\nAn array of strings defining event listener types that should be attached to anchor links if the `hashjumpLinks` option is set to `true`.\n\n*Note: This option is only used by the `hashjump()` init function.*\n\n\n#### hashjumpOnLoad\n\nDecides if a load event listener should be attached to the window that runs the `hashjump.to()` function when the page was visited with an anchor link. Accepts a boolean.\n\n*Note: This option is only used by the `hashjump()` init function.*\n\n\n#### hideUrlHash\n\nDecides if the anchor id should be displayed in the address bar. Accepts a boolean.\n\n*Note: This option is only used by the `hashjump()` init function.*\n\n\n#### ignoreEmptyHashes\n\nDecides if an anchor link with an empty hash should be ignored.\n\n*Note: This option is only used by the `hashjump()` init function.*\n\n\n#### scrollOffset\n\nThe amount of pixels offset to the viewport and element position that the window should scroll to. For example, an offset of 5 would scroll the window to where the top of the element ends up at 5 pixels from the top of the viewport.\n\nA string ending with a `%` can be passed to use a percentage based on the viewport rather than a specific pixel value. For example an offset of \"25%\" would scroll the window to where the top of the element ends up 25% from the top of the viewport.\n\nLastly, a string begining with `inner-` and ending with a `%` can be passed to use a percentage based on the viewport and the element size. For example, an offset of \"inner-50%\" would scroll the window to where the center of the element ends up in the center of the viewport.\n\n\n#### scrollOffsetX\n\nDoes the same as the `scrollOffset` option but only for the horizontal axis. (Falls back to `scrollOffset` if left blank)\n\n\n#### scrollOffsetY\n\nDoes the same as the `scrollOffset` option but only for the vertical axis. (Falls back to `scrollOffset` if left blank)\n\n\n#### scrollDuration\n\nThe number of milliseconds the scroll event should take.\n\n\n#### scrollDurationOnLoad\n\nThe number of milliseconds the scroll event should take on page load. (Falls back to `scrollDuration` if left blank)\n\n\n#### scrollDurationOnClick\n\nThe number of milliseconds the scroll event should take on anchor link click. (Falls back to `scrollDuration` if left blank)\n\n\n#### easingFunction\n\nThe easing function used to animate the scroll event. Accepts a custom function that is passed the specified normalized time (`t`) as it's only parameter. This is useful if you wish to use an easing function from something like [d3-ease].\n\nThis option also accepts a string to set the easing function to one of the easing functions that hashjump comes with built-in. These include: `linear`, `easeInQuad`, `easeOutQuad`, `easeInOutQuad`, `easeInCubic`, `easeOutCubic`, `easeInOutCubic`, `easeInQuart`, `easeOutQuart`, `easeInOutQuart`, `easeInQuint`, `easeOutQuint`, and `easeInOutQuint`.\n\n\n### Default Options\n\n```js\n{\n  action: null,\n  actionAfter: null,\n  actionBefore: null,\n  focusElement: 'input, select, button, textarea',\n  hashjumpLinks: true,\n  hashjumpLinkEvents: ['click', 'keypress'],\n  hashjumpOnLoad: true,\n  hideUrlHash: false,\n  ignoreEmptyHashes: true,\n  scrollOffset: '25%',\n  scrollOffsetX: null,\n  scrollOffsetY: null,\n  scrollDuration: 200,\n  scrollDurationOnLoad: null,\n  scrollDurationOnClick: null,\n  easingFunction: 'linear'\n}\n```\n\n### Action Info\n\nThis is an example of the object that is passed to functions defined in the `action`, `actionAfter`, and `actionBefore` options.\n\n```js\n{\n  duration: 200\n  easeFunc: ƒ easeFunc(t)\n  element: div#table-of-contents\n  elementHeight: 270\n  elementPosX: 127\n  elementPosY: 471\n  elementWidth: 832\n  focusElement: ƒ focusElement()\n  maxScrollX: 0\n  maxScrollY: 2000\n  opts: {...}\n  pageHeight: 2895\n  pageWidth: 1086\n  requestAnimationFrame: ƒ requestAnimationFrame()\n  scrollOffsetX: 271.5\n  scrollOffsetY: 223.75\n  scrollPointX: 0\n  scrollPointY: 247.25\n  scrollStartX: 0\n  scrollStartY: 806.5\n  step: ƒ step()\n  target: \"table-of-contents\"\n  time: 1678033694771\n  viewHeight: 895\n  viewWidth: 1086\n}\n```\n\n\n## Related\n\n  - [ColorTap](https://github.com/fivefifteen/colortap) - A tiny, dependency-free, color input field helper that utilizes the native color picker.\n\n  - [FileBokz](https://github.com/fivefifteen/filebokz) - A tiny, dependency-free, highly customizable and configurable, easy to use file input with some pretty sweet features.\n\n  - [GrowField](https://github.com/fivefifteen/growfield) - A tiny, dependency-free JavaScript module for making textarea elements grow with their content.\n\n  - [Kloner](https://github.com/fivefifteen/kloner) - A tiny, dependency-free JavaScript module for cloning/repeating elements.\n\n\n## License\n\nMIT. See the [license file](license.md) for more info.\n\n\n[d3-ease]: https://github.com/d3/d3-ease","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffivefifteen%2Fhashjump","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffivefifteen%2Fhashjump","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffivefifteen%2Fhashjump/lists"}