{"id":13481442,"url":"https://github.com/Nolanus/ngx-page-scroll","last_synced_at":"2025-03-27T12:30:52.664Z","repository":{"id":6107385,"uuid":"54793332","full_name":"Nolanus/ngx-page-scroll","owner":"Nolanus","description":"Animated scrolling functionality for angular written in pure typescript","archived":false,"fork":false,"pushed_at":"2025-03-10T09:34:18.000Z","size":21003,"stargazers_count":478,"open_issues_count":27,"forks_count":112,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-03-20T05:43:22.883Z","etag":null,"topics":["anchor","angular","angular7","animate","ngx-page-scroll","scroll","scroll-animations","scrollto"],"latest_commit_sha":null,"homepage":"https://nolanus.github.io/ngx-page-scroll/","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/Nolanus.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-03-26T18:29:04.000Z","updated_at":"2025-03-09T12:03:55.000Z","dependencies_parsed_at":"2024-09-23T19:06:12.623Z","dependency_job_id":"99c9f422-3c04-40f8-a592-ee2fc6dee9a6","html_url":"https://github.com/Nolanus/ngx-page-scroll","commit_stats":{"total_commits":478,"total_committers":27,"mean_commits":"17.703703703703702","dds":"0.16945606694560666","last_synced_commit":"6521d7b9ec879e221c673dc2655eef3ee602fdaf"},"previous_names":["nolanus/ng2-page-scroll"],"tags_count":58,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nolanus%2Fngx-page-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nolanus%2Fngx-page-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nolanus%2Fngx-page-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nolanus%2Fngx-page-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Nolanus","download_url":"https://codeload.github.com/Nolanus/ngx-page-scroll/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245844837,"owners_count":20681786,"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","angular","angular7","animate","ngx-page-scroll","scroll","scroll-animations","scrollto"],"created_at":"2024-07-31T17:00:51.868Z","updated_at":"2025-03-27T12:30:52.657Z","avatar_url":"https://github.com/Nolanus.png","language":"TypeScript","readme":"# ngx-page-scroll [![npm version](https://img.shields.io/npm/v/ngx-page-scroll.svg?style=flat)](https://www.npmjs.com/package/ngx-page-scroll) [![MIT license](http://img.shields.io/badge/license-MIT-brightgreen.svg)](http://opensource.org/licenses/MIT)\r\n\r\nAnimated scrolling functionality for angular written in pure typescript with no additional dependencies\r\n\r\n[![Build Status](https://github.com/Nolanus/ngx-page-scroll/actions/workflows/main.yml/badge.svg)](https://github.com/Nolanus/ngx-page-scroll/actions/workflows/main.yml)\r\n[![Known Vulnerabilities](https://snyk.io/test/github/Nolanus/ngx-page-scroll/badge.svg)](https://snyk.io/test/github/Nolanus/ngx-page-scroll)\r\n[![Codacy Badge](https://app.codacy.com/project/badge/Grade/aa10be6ea5654211bb451c6ade2f1ff6)](https://www.codacy.com/gh/Nolanus/ngx-page-scroll/dashboard?utm_source=github.com\u0026amp;utm_medium=referral\u0026amp;utm_content=Nolanus/ngx-page-scroll\u0026amp;utm_campaign=Badge_Grade)\r\n\r\n## Features\r\n\r\n- flexible: trigger scroll animations after component load, server response, etc.\r\n- easy-to-use directive: scroll to an element referenced in the href-attribute\r\n(`href=\"#mytarget`) just by adding `pageScroll` directive\r\n- customizable: adjust duration, offset or whether scrolling stops if the user interrupts\r\n([read more](https://github.com/Nolanus/ngx-page-scroll/wiki/Scroll-Interruption-Interference))\r\n- use custom easing functions to calculate the scroll position over time\r\n- works across routes (scrolls to target element as soon as the\r\nrouting has finished) and in both directions (horizontal/vertical)\r\n\r\n## Table of contents\r\n\r\n- [ngx-page-scroll](#ngx-page-scroll--)\r\n  - [Features](#features)\r\n  - [Table of contents](#table-of-contents)\r\n    - [Version compatibility](#version-compatibility)\r\n  - [Service](#service)\r\n    - [Setup](#setup)\r\n    - [Usage](#usage)\r\n    - [Configuration](#configuration)\r\n  - [Directive](#directive)\r\n    - [Setup](#setup-1)\r\n    - [Usage](#usage-1)\r\n    - [Directive API](#directive-api)\r\n      - [PageScroll properties](#pagescroll-properties)\r\n      - [PageScroll events](#pagescroll-events)\r\n      - [Example](#example)\r\n  - [FAQ and common problems](#faq-and-common-problems)\r\n  - [License](#license)\r\n\r\n### Version compatibility\r\n\r\nInstall later versions in case your app is not running the very latest angular version.\r\n\r\n| ngx-page-scroll/ngx-page-scroll-core version | compatible angular version | Documentation                                                               |\r\n|----------------------------------------------|----------------------------|-----------------------------------------------------------------------------|\r\n| v14.x                                        | v19                        | [README](README.md)                                                         |\r\n| v13.x                                        | v18                        | [README](https://github.com/Nolanus/ngx-page-scroll/blob/v13.0.0/README.md) |\r\n| v12.x                                        | v17                        | [README](https://github.com/Nolanus/ngx-page-scroll/blob/v12.0.0/README.md) |\r\n| v11.x                                        | v16                        | [README](https://github.com/Nolanus/ngx-page-scroll/blob/v11.0.0/README.md) |\r\n| v10.x                                        | v15                        | [README](https://github.com/Nolanus/ngx-page-scroll/blob/v10.0.0/README.md) |\r\n| v9.x                                         | v14                        | [README](https://github.com/Nolanus/ngx-page-scroll/blob/v9.0.0/README.md)  |\r\n| v8.x                                         | v13                        | [README](https://github.com/Nolanus/ngx-page-scroll/blob/v8.0.0/README.md)  |\r\n| v7.x                                         | v12, v11, v10, v9, v8      | [README](https://github.com/Nolanus/ngx-page-scroll/blob/v7.0.6/README.md)  |\r\n| v6.x                                         | v8, v7                     | [README](https://github.com/Nolanus/ngx-page-scroll/blob/v6.0.2/README.md)  |\r\n| v5.x                                         | v6                         | [README](https://github.com/Nolanus/ngx-page-scroll/blob/v5.0.1/README.md)  |\r\n| v4.x                                         | v5, v4                     | [README](https://github.com/Nolanus/ngx-page-scroll/blob/v4.0.2/README.md)  |\r\n\r\n## Service\r\n\r\n### Setup\r\n\r\nFirst you need to install the core npm module:\r\n\r\n```sh\r\nnpm install ngx-page-scroll-core --save\r\n```\r\n\r\nThen add the `NgxPageScrollModule` to the imports array of your application module:\r\n\r\n```typescript\r\nimport { NgxPageScrollCoreModule } from 'ngx-page-scroll-core';\r\n\r\n@NgModule({\r\n    imports: [\r\n        /* Other imports here */\r\n        NgxPageScrollCoreModule\r\n        ]\r\n})\r\nexport class AppModule {\r\n}\r\n```\r\n\r\n### Usage\r\n\r\nUsing the `PageScrollService#scroll` method you may trigger scroll animations. Provide an options object that provides a reference to the document and the scroll target. Additional properties are optional.\r\n\r\n```typescript\r\nimport { Inject } from '@angular/core';\r\nimport { DOCUMENT } from '@angular/common';\r\nimport { PageScrollService } from 'ngx-page-scroll-core';\r\n\r\nexport class MyComponent {\r\n constructor(private pageScrollService: PageScrollService, @Inject(DOCUMENT) private document: any) {\r\n }\r\n\r\n ngOnInit(): void {\r\n  this.pageScrollService.scroll({\r\n    document: this.document,\r\n    scrollTarget: '.theEnd',\r\n  });\r\n }\r\n}\r\n```\r\n\r\nNote: The `scroll()` method is a shorthand from creating a `PageScrollInstance` (an object encapsulating all information\r\nrelevant for performing a scroll animation) using `PageScrollService#create` and starting it using\r\nthe `PageScrollService#start` method.\r\n\r\n### Configuration\r\n\r\nWhen importing the `PageScrollCoreModule` one can provide option overrides:\r\n\r\n```typescript\r\nimports: [\r\n  ...\r\n  NgxPageScrollCoreModule.forRoot({duration: 2500, easingLogic: ...}),\r\n]\r\n```\r\n\r\nCheck the [`PageScrollConfig` interface](https://github.com/Nolanus/ngx-page-scroll/blob/master/projects/ngx-page-scroll-core/src/lib/types/page-scroll.config.ts#L3)\r\nfor possible options and their impact. The default values may be found in the [`defaultPageScrollConfig`](https://github.com/Nolanus/ngx-page-scroll/blob/master/projects/ngx-page-scroll-core/src/lib/provides/config.provider.ts#L6)\r\nobject.\r\n\r\n## Directive\r\n\r\nFor ease of use a directive `pageScroll` exists, which allows you to quickly add scroll animations to your angular app by\r\nadding a property to your existing HTML a-tags. It can also work cross-routes, meaning it will start the scroll animation\r\nafter the target route has been loaded.\r\nIt utilizes the ngx-page-scroll-core module for that, thus requires it as a peer dependency.\r\n\r\n### Setup\r\n\r\nFirst you need to install the directive npm module:\r\n\r\n```sh\r\nnpm install ngx-page-scroll --save\r\n```\r\n\r\nThen add the `NgxPageScrollModule` to the imports array of your application module:\r\n\r\n```typescript\r\nimport { NgxPageScrollModule } from 'ngx-page-scroll';\r\n\r\n@NgModule({\r\n    imports: [\r\n        /* Other imports here */\r\n        NgxPageScrollModule\r\n        ]\r\n})\r\nexport class AppModule {\r\n}\r\n```\r\n\r\n### Usage\r\n\r\nIn your template you may add the `pageScroll` attribute to elements with an `href` attribute pointing towards an id on\r\nthe same page (e.g. `#theId`). The `onClick` event will be interrupted and the scroll animation starts.\r\nAlternatively you may set the optional `pageScrollTarget` property to a valid css selector to specify the\r\ntarget element to scroll to.\r\n\r\n```typescript\r\n\r\n@Component({\r\n   ...\r\n   template: `...\r\n        \u003ca pageScroll href=\"#awesomePart\"\u003eTake me to the awesomeness\u003c/a\u003e\r\n        \u003c!-- Further content here --\u003e\r\n        \u003ch2 id=\"awesomePart\"\u003eThis is where the awesome happens\u003c/h2\u003e\r\n   ...`,\r\n})\r\nexport class MyComponent {\r\n}\r\n```\r\n\r\n### Directive API\r\n\r\nAdditional attributes may be set on an DOM element using the `pageScroll` directive for customization.\r\nThey take precedence over the default settings specified in `PageScrollConfig` class. Thereby it is\r\npossible to have all page scroll-animations last e.g. 2 seconds, but a specific one should be performed with a custom easing function and a duration\r\nof only 1 second.\r\n\r\n#### PageScroll properties\r\n\r\n| Attribute                 | Type        | Default      | Description   |\r\n| ------------------------- | ----------- | ------------ |-------------- |\r\n| `pageScroll`              |             |              | Attribute adding scroll-animation behavior when the `click`-event happens on the element. |\r\n| `pageScrollTarget`        | string      |              | Optional attribute to set the element that should be scrolled to. Takes precedence over the ´href´-value |\r\n| `pageScrollHorizontal`    | boolean     | false        | Whether the scroll should happen in vertical direction (`false`, default) or horizontal (`true`). |\r\n| `pageScrollOffset`        | number      | 0            | Pixels to offset from the top of the element when scrolling to (positive value = scrolling will stop given pixels atop the target element). |\r\n| `pageScrollDuration`      | number      | 1250         | Duration in milliseconds the whole scroll-animation should last. |\r\n| `pageScrollSpeed`         | number      | -            | Speed in Pixel/Second the animation should take. Only applied if no duration is set. |\r\n| `pageScrollInView`        | boolean     | true         | Whether the scroll animation should happen even when the scroll target is already inside the view port (`true`). Set to `false` to skip scroll animation if target is already in view. |\r\n| `pageScrollInterruptible` | boolean     | true         | Whether the scroll animation should stop if the user interferes with it (`true`) or not (`false`). |\r\n| `pageScrollAdjustHash`    | boolean     | false        | Whether the [routes hash/fragment](https://angular.io/docs/ts/latest/guide/router.html#!#query-parameters) should be updated to reflect to section that has been scrolled to |\r\n| `pageScrollEasing`        | EasingLogic | linearEasing | Easing method to be used while calculating the scroll position over time (default is linear easing). |\r\n\r\n#### PageScroll events\r\n\r\n| Event                 | Type    | Description   |\r\n| --------------------- | ------- | ------------- |\r\n| `pageScrollFinish`    | boolean | Fired when the scroll-animation stops. Emits a boolean value which indicates whether the scroll animation finished successfully and reached its target (`true`) or not (`false`). Possible reasons for false: target not found or interrupted due to another scroll animation starting or user interaction. |\r\n\r\n#### Example\r\n\r\nThe following example will check whether the route _Home_ is currently loaded.\r\nIf this is true, the scroll-animation will be performed with the default\r\nproperties. If a different route is loaded, a subscription for route changes\r\nwill be made and the scroll-animation will be performed as soon as the new\r\nroute is loaded.\r\n\r\n```html\r\n \u003ca pageScroll [routerLink]=\"['Home']\" href=\"#myanchor\"\u003eGo there\u003c/a\u003e\r\n```\r\n\r\nOverriding all possible properties. `doSmth()` and `myEasing` are\r\ndefined in the component\r\n\r\n```html\r\n \u003ca pageScroll [pageScrollOffset]=\"0\" [pageScrollDuration]=\"2000\" [pageScrollEasing]=\"myEasing\" [pageScrollInterruptible]=\"false\" (pageScrollFinish)=\"doSmth($event)\" href=\"#theanchor\"\u003eVisit\u003c/a\u003e\r\n```\r\n\r\n```typescript\r\n    public myEasing: EasingLogic = (t: number, b: number, c: number, d: number): number =\u003e {\r\n      // easeInOutExpo easing\r\n      if (t === 0) {\r\n        return b;\r\n      }\r\n      if (t === d) {\r\n        return b + c;\r\n      }\r\n      if ((t /= d / 2) \u003c 1) {\r\n        return c / 2 * Math.pow(2, 10 * (t - 1)) + b;\r\n      }\r\n\r\n      return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;\r\n    }\r\n\r\n    doSmth(reachedTarget: boolean): void {\r\n        if (reachedTarget) {\r\n            console.log('Yeah, we reached our destination');\r\n        } else {\r\n            console.log('Ohoh, something interrupted us');\r\n        }\r\n    }\r\n```\r\n\r\n## FAQ and common problems\r\n\r\nPlease have a look at the wiki section of the GitHub repo at [https://github.com/Nolanus/ngx-page-scroll/wiki/FAQ](https://github.com/Nolanus/ngx-page-scroll/wiki/FAQ) for frequent questions and problems.\r\n\r\n## License\r\n\r\n[MIT](LICENSE)\r\n","funding_links":[],"categories":["Uncategorized","Third Party Components","Table of Contents"],"sub_categories":["Uncategorized","Scroll","Scroll Animation Libraries"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNolanus%2Fngx-page-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FNolanus%2Fngx-page-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNolanus%2Fngx-page-scroll/lists"}