{"_id":"@aedeny/ngx-page-scroll-demo","name":"@aedeny/ngx-page-scroll-demo","dist-tags":{"latest":"0.0.0"},"versions":{"0.0.0":{"name":"@aedeny/ngx-page-scroll-demo","version":"0.0.0","private":false,"description":"Animated scrolling functionality for angular written in pure typescript with no additional dependencies","homepage":"https://github.com/aedeny/ngx-page-scroll#readme","bugs":{"url":"https://github.com/aedeny/ngx-page-scroll/issues"},"repository":{"type":"git","url":"git+https://github.com/aedeny/ngx-page-scroll.git"},"license":"ISC","author":"","type":"commonjs","main":"karma.conf.js","scripts":{"build":"ng build","build:app":"ng build --configuration production","build:lib":"ng build ngx-page-scroll-core --configuration production && ng build ngx-page-scroll --configuration production && npm run copy:readme","copy:readme":"copyfiles README.md dist/ngx-page-scroll && copyfiles README.md dist/ngx-page-scroll-core","commit":"git-cz","e2e":"ng e2e","lint":"ng lint","ng":"ng","prerelease:lib":"ng lint && ng test --no-watch && ng e2e && npm run build:lib","release:lib":"npm publish dist/ngx-page-scroll-core && npm publish dist/ngx-page-scroll ","start":"ng serve","test":"ng test"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"dependencies":{"@angular/animations":"^19.0.6","@angular/cdk":"^19.0.5","@angular/common":"^19.0.6","@angular/compiler":"^19.0.6","@angular/core":"^19.0.6","@angular/forms":"^19.0.6","@angular/material":"^19.0.5","@angular/platform-browser":"^19.0.6","@angular/platform-browser-dynamic":"^19.0.6","@angular/router":"^19.0.6","normalize.css":"^8.0.1","rxjs":"~7.5.2","tslib":"^2.6.2","zone.js":"~0.15.0"},"devDependencies":{"@angular-devkit/build-angular":"^19.0.7","@angular-eslint/builder":"^18.1.0","@angular-eslint/eslint-plugin":"^18.1.0","@angular-eslint/eslint-plugin-template":"^18.1.0","@angular-eslint/schematics":"^18.1.0","@angular-eslint/template-parser":"^18.1.0","@angular/cli":"^19.0.7","@angular/compiler-cli":"^19.0.6","@commitlint/cli":"^12.1.4","@commitlint/config-conventional":"^12.1.4","@types/jasmine":"^3.6.3","@types/jasminewd2":"~2.0.10","@types/node":"^20.10.4","@typescript-eslint/eslint-plugin":"^7.2.0","@typescript-eslint/parser":"^7.2.0","commitizen":"^4.2.4","copyfiles":"^2.4.1","cz-conventional-changelog":"^3.3.0","eslint":"^8.57.0","husky":"^6.0.0","jasmine-core":"~4.0.0","jasmine-spec-reporter":"~7.0.0","karma":"~6.3.11","karma-chrome-launcher":"~3.1.0","karma-coverage-istanbul-reporter":"~3.0.2","karma-jasmine":"~4.0.1","karma-jasmine-html-reporter":"^1.7.0","ng-packagr":"^19.1.0","protractor":"~7.0.0","ts-node":"~10.9.2","typescript":"~5.5.0"},"commitlint":{"extends":["@commitlint/config-conventional"]},"husky":{"hooks":{"commit-msg":"commitlint -E HUSKY_GIT_PARAMS"}},"_id":"@aedeny/ngx-page-scroll-demo@0.0.0","gitHead":"cc8157ef9f34375463320b355aa2ec8b40ad5b2d","_nodeVersion":"22.13.1","_npmVersion":"11.0.0","dist":{"integrity":"sha512-EbaJKEO/tcx8jinNBIfm1MyiEQs6vKmTH/JS023PYPqeA3xaXNIIxCkfnC2sA9c+BaVPzVWEfXP5b9yNj0ZqKA==","shasum":"08f61436ce870bb4610b986340d48a3552df446a","tarball":"https://registry.npmjs.org/@aedeny/ngx-page-scroll-demo/-/ngx-page-scroll-demo-0.0.0.tgz","fileCount":126,"unpackedSize":206807,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCxD8X3Lgag6FdM1nUd0VusrXci3evaphRiWJXFL+YVMAIhAKIgQDIgT4I6z07mJGo2D3jjXO/TKCej4Gjg81CCj5S0"}]},"_npmUser":{"name":"aedeny","email":"edenyefet@gmail.com"},"directories":{},"maintainers":[{"name":"aedeny","email":"edenyefet@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ngx-page-scroll-demo_0.0.0_1737931228479_0.785837429402704"},"_hasShrinkwrap":false}},"time":{"created":"2025-01-26T22:40:28.366Z","0.0.0":"2025-01-26T22:40:28.661Z","modified":"2025-01-26T22:40:28.961Z"},"maintainers":[{"name":"aedeny","email":"edenyefet@gmail.com"}],"description":"Animated scrolling functionality for angular written in pure typescript with no additional dependencies","homepage":"https://github.com/aedeny/ngx-page-scroll#readme","repository":{"type":"git","url":"git+https://github.com/aedeny/ngx-page-scroll.git"},"bugs":{"url":"https://github.com/aedeny/ngx-page-scroll/issues"},"license":"ISC","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&amp;utm_medium=referral&amp;utm_content=Nolanus/ngx-page-scroll&amp;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| v12.x                                        | v17                        | [README](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        <a pageScroll href=\"#awesomePart\">Take me to the awesomeness</a>\r\n        <!-- Further content here -->\r\n        <h2 id=\"awesomePart\">This is where the awesome happens</h2>\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 <a pageScroll [routerLink]=\"['Home']\" href=\"#myanchor\">Go there</a>\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 <a pageScroll [pageScrollOffset]=\"0\" [pageScrollDuration]=\"2000\" [pageScrollEasing]=\"myEasing\" [pageScrollInterruptible]=\"false\" (pageScrollFinish)=\"doSmth($event)\" href=\"#theanchor\">Visit</a>\r\n```\r\n\r\n```typescript\r\n    public myEasing: EasingLogic = (t: number, b: number, c: number, d: number): number => {\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) < 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","readmeFilename":"README.md"}