{"id":26659332,"url":"https://github.com/kimyvgy/simple-scrollspy","last_synced_at":"2025-04-09T16:16:59.006Z","repository":{"id":46577658,"uuid":"127532628","full_name":"kimyvgy/simple-scrollspy","owner":"kimyvgy","description":"Simple scrollspy without jQuery, no dependencies","archived":false,"fork":false,"pushed_at":"2025-03-15T10:53:24.000Z","size":258,"stargazers_count":82,"open_issues_count":3,"forks_count":20,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-09T16:16:51.531Z","etag":null,"topics":["hacktoberfest","javascript","scroll","scrollspy"],"latest_commit_sha":null,"homepage":"https://kimyvgy.github.io/simple-scrollspy/","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/kimyvgy.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"patreon":"devsuccess101","custom":["https://paypal.me/kimyvgy"]}},"created_at":"2018-03-31T13:05:18.000Z","updated_at":"2025-03-15T10:53:27.000Z","dependencies_parsed_at":"2024-02-05T02:26:53.134Z","dependency_job_id":"1b21bf46-a8e6-4cb5-a6c0-179bcbe2367b","html_url":"https://github.com/kimyvgy/simple-scrollspy","commit_stats":{"total_commits":65,"total_committers":12,"mean_commits":5.416666666666667,"dds":0.4769230769230769,"last_synced_commit":"ec1d9782b5d6fc869fdf4165693abe124f92a2e2"},"previous_names":["huukimit/simple-scrollspy"],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimyvgy%2Fsimple-scrollspy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimyvgy%2Fsimple-scrollspy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimyvgy%2Fsimple-scrollspy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimyvgy%2Fsimple-scrollspy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kimyvgy","download_url":"https://codeload.github.com/kimyvgy/simple-scrollspy/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248065285,"owners_count":21041872,"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":["hacktoberfest","javascript","scroll","scrollspy"],"created_at":"2025-03-25T10:20:26.143Z","updated_at":"2025-04-09T16:16:58.971Z","avatar_url":"https://github.com/kimyvgy.png","language":"TypeScript","funding_links":["https://patreon.com/devsuccess101","https://paypal.me/kimyvgy"],"categories":[],"sub_categories":[],"readme":"# Simple Scrollspy\n\n[![NPM version](https://img.shields.io/npm/v/simple-scrollspy.svg)](https://www.npmjs.com/package/simple-scrollspy)\n\n[Simple scrollspy](https://kimyvgy.github.io/simple-scrollspy) is a lightweight javascript library without jQuery, no dependencies. It is used to make scrollspy effect for your menu, table of contents, etc. Only 1.4Kb.\n\nExamples:\n- [Header With Navigation Bar](https://kimyvgy.github.io/simple-scrollspy/demo)\n- [Table Of Contents](https://kimyvgy.github.io/simple-scrollspy/demo/toc.html)\n\n## Install\n\n### Using NPM package\n\nInstall NPM package - https://www.npmjs.com/package/simple-scrollspy:\n\n```npm\nnpm install simple-scrollspy\n```\n\n### Using CDN\n\n#### cdnjs\n\nThe `simple-scrollspy` library is available on [cdnjs](https://cdnjs.com/libraries/simple-scrollspy). For instance:\n\n```html\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/simple-scrollspy/2.4.1/simple-scrollspy.min.js\" integrity=\"sha512-NNb5TgmE+7PHedvAWwPKZ/ukCGJciTHZ23ghPriEeEfcGySDBm9zIrjaXp/WNAUcVYhi5XhJ1rHveDKR35CInw==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"\u003e\u003c/script\u003e\n```\n\n#### jsDelivr\n\nThe `simple-scrollspy` can be installed using [jsDelivr](https://jsdelivr.com). For instance:\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/simple-scrollspy@2.5.3/demo/dist/simple-scrollspy.min.js\"\u003e\u003c/script\u003e\n```\n\n### Using `simple-scrollspy.min.js` file\n\nThe `simple-scrollspy.min.js` file is available for download with each release. To obtain the most recent version, please visit [the latest release page](https://github.com/kimyvgy/simple-scrollspy/releases/latest) on GitHub.\n\n```html\n\u003cscript src=\"/path/to/dist/simple-scrollspy.min.js\"\u003e\u003c/script\u003e\n```\n\n## Usages\n\nEasy for using, syntax just like this:\n\n```html\nscrollSpy(menuElement, options)\n```\n\nThis little plugin will add `active` class into your existing menu item when you scroll your page to a matched section by ID.\nIf you are giving it a try, make sure that you:\n1. Added CSS for `active` class in your menu item. Because this plugin doesn't include CSS.\n2. Added ID for your sections.\n    Example: `\u003csection id=\"first-section\"\u003e...\u003c/section\u003e`\n3. Added an attribute which is a section ID into your menu items. The default value is `href`.\n    Example: `\"href\"=\"#first-section\"`.\nYou also replace `href` with the other name by `hrefAttribute` in `options`.\n\n### Arguments\n\n1. The `menuElement` is a query selector for your menu. It is `String` or `HTMLElement` instance.\n2. The `options` is optional. It types of `Object` contains the properties below:\n\n| Name                   | Type                  | Default      | Description                                                  |\n| ---------------------- | :-------------------- | :----------- | :----------------------------------------------------------- |\n| `sectionClass`         | String                | `.scrollspy` | Query selector to your sections                              |\n| `menuActiveTarget`     | String                | `li \u003e a`     | Element will be added active class                           |\n| `offset`               | Number                | 0            | Offset number                                                |\n| `hrefAttribute`        | String                | `href`       | The menu item's attribute name which contains section ID     |\n| `activeClass`          | String                | `active`     | Active class name will be added into `menuActiveTarget`      |\n| `scrollContainer`      | String, HTMLElement   | `window`     | User Defined Scrolling Container                             |\n| `smoothScroll`         | Boolean, Object       | `false`      | Enable the smooth scrolling feature                          |\n| `smoothScrollBehavior` | Function              | `undefined`  | Define your smooth scroll behavior                           |\n| `onActive`             | Function\u003cHTMLElement\u003e | `undefined`  | Trigger after the menu item is added the `activeClass` class |\n\n### ES6 example\n\n```js\nimport scrollSpy from 'simple-scrollspy'\n\nconst options = {\n  sectionClass: '.scrollspy',           // Query selector to your sections\n  menuActiveTarget: '.menu-item',       // Query selector to your elements that will be added `active` class\n  offset: 100,                          // Menu item will active before scroll to a matched section 100px\n  scrollContainer: '.scroll-container', // Listen scroll behavior on `.scroll-container` instead of `window`\n}\n\n// init:\nscrollSpy(document.getElementById('main-menu'), options)\n\n// or shorter:\nscrollSpy('#main-menu', options)\n```\n\n### Inject static file\n\n```html\n\u003cscript src=\"/path/to/dist/simple-scrollspy.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  window.onload = function () {\n    scrollSpy('#main-menu', {\n      sectionClass: '.scrollspy',\n      menuActiveTarget: '.menu-item',\n      offset: 100,\n      // smooth scroll\n      smoothScroll: true,\n      smoothScrollBehavior: function(element) {\n        console.log('run \"smoothScrollBehavior\"...', element)\n        element.scrollIntoView({ behavior: 'smooth' }) // default behavior\n      }\n    })\n  }\n\u003c/script\u003e\n```\n\n### Smooth scroll\n\n```javascript\nimport jumpTo from 'jump.js'\n\nscrollSpy('#main-menu', {\n  // ....,\n\n  // enable smooth scroll:\n  // - true: enable with the default scroll behavior\n  // - false: disable this feature\n  // - object: enable with some options that will pass to `Element.scrollIntoView` or `smoothScrollBehavior`\n  //   + Default behavior: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView\n  //   + Jump.js: https://www.npmjs.com/package/jump.js\n  smoothScroll: true,\n\n  // customize scroll behavior,\n  // - default: Element.scrollIntoView({ ...smoothScroll, behavior: 'smooth' })\n  // - customize: you can define your scroll behavior. Ex: use `jump.js`, jQuery, .etc\n  smoothScrollBehavior: function(element, options) {\n    // use `jump.js` instead of the default scroll behavior\n    jumpTo(element, {\n      duration: 1000,\n      offset: -100,\n    })\n  }\n})\n```\n\n## Development\n\n```bash\n$ yarn install\n$ yarn dev\n```\n\n## Build\n```bash\n$ yarn build\n```\nor:\n```npm\n$ npm run build\n```\nThe `dist` folder is automatically created and includes the file `simple-scrollspy.min.js`\n\n## Note\n- Feel free to make a pull request if you can, and create a Github Issue if you come across one.\n- Don't forget to give it a star if you feel that the library is helpful to you. It may save somebody a lot of trouble someday.\n\n## Support / Donate\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://paypal.me/kimyvgy\" target=\"_blank\" title=\"Donate with Paypal\"\u003e\n    \u003cimg src=\"https://user-images.githubusercontent.com/13513658/208368616-f20301e6-61d5-449b-aa87-5dda17b273b7.png\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Helpful links\n- [Documentation](https://kimyvgy.github.io/simple-scrollspy)\n- [Example](https://kimyvgy.github.io/simple-scrollspy/demo)\n- [See on NPM package](https://www.npmjs.com/package/simple-scrollspy)\n\n## Licence\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkimyvgy%2Fsimple-scrollspy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkimyvgy%2Fsimple-scrollspy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkimyvgy%2Fsimple-scrollspy/lists"}