{"_id":"@biocomputingup/ngx-scroll-to-demo","_rev":"3-d53067a8f5ee0f77a4c5ea7ae7f9478b","name":"@biocomputingup/ngx-scroll-to-demo","dist-tags":{"latest":"15.0.0"},"versions":{"15.0.0":{"name":"@biocomputingup/ngx-scroll-to-demo","version":"15.0.0","author":{"name":"Nicky Lenaers","email":"nicky@newgameplus.online"},"license":"MIT","_id":"@biocomputingup/ngx-scroll-to-demo@15.0.0","maintainers":[{"name":"quickinline","email":"adelbouhraoua23@gmail.com"}],"contributors":[{"name":"Robbert van Caem"},{"name":"Adel Bouhraoua","email":"adelbouhraoua23@gmail.com"}],"homepage":"https://github.com/BioComputingUP/ngx-scroll-to.git#readme","bugs":{"url":"https://github.com/BioComputingUP/ngx-scroll-to.git/issues"},"dist":{"shasum":"2608658cecc82684f306f70519442f146c20fea8","tarball":"https://registry.npmjs.org/@biocomputingup/ngx-scroll-to-demo/-/ngx-scroll-to-demo-15.0.0.tgz","fileCount":108,"integrity":"sha512-MRSiFzPCnTizBU/erbx7GXZstydndMv26mD9UM9yAaco29hX6r38Z87lob9emB//ZexCttbNXQuDcQOBUoZZew==","signatures":[{"sig":"MEQCIBcepK1lA0rvFPLCd3ztkX+Jv0zn3V0+dG7ktUOlZzs8AiB0/A7bquxBuhjTvM0qgUEnZZT6ukFtAE6i24ALYxhSJw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1425076},"engines":{"node":">=16.18.0","yarn":">=1.22.18"},"private":false,"scripts":{"ng":"ng","e2e":"ng e2e","lint":"ng lint","tags":"yarn tag list @biocomputingup/ngx-scroll-to","test":"ng test --watch=false --no-progress --browsers=ChromeHeadless","build":"yarn build:lib && yarn build:demo","prepare":"husky install","test:lib":"ng test ngx-scroll-to --watch=false","build:lib":"ng build ngx-scroll-to","changelog":"conventional-changelog -p angular -i CHANGELOG.md -s","test:demo":"ng test ngx-scroll-to-demo --watch=false","build:demo":"ng build ngx-scroll-to-demo","start:demo":"ng serve ngx-scroll-to-demo","test:watch":"ng test --watch=true --configuration development","copy:readme":"copyfiles README.md ./dist/ngx-scroll-to","lib:package":"yarn build:lib && yarn copy:readme && cd ./dist/ngx-scroll-to && yarn pack","lib:publish":"cd ./dist/ngx-scroll-to && yarn publish --access=public","prelib:publish":"yarn lib:package","github-releaser":"conventional-github-releaser -p angular"},"_npmUser":{"name":"quickinline","email":"adelbouhraoua23@gmail.com"},"repository":{"url":"git+https://github.com/BioComputingUP/ngx-scroll-to.git","type":"git"},"description":"Demo Application for @biocomputingup/ngx-scroll-to package.","directories":{},"licenseText":"MIT License\n\nCopyright (c) 2017 Nicky Lenaers\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","dependencies":{"rxjs":"~7.5.7","tslib":"^2.4.0","zone.js":"~0.11.8","@angular/core":"^15.2.10","@angular/forms":"^15.2.10","@angular/common":"^15.2.10","@angular/router":"^15.2.10","@angular/compiler":"^15.2.10","@angular/animations":"^15.2.10","@angular/platform-browser":"^15.2.10","@angular/platform-browser-dynamic":"^15.2.10"},"_hasShrinkwrap":false,"devDependencies":{"husky":"^8.0.1","karma":"~6.4.1","eslint":"^8.28.0","cypress":"^10.10.0","copyfiles":"^2.4.1","ng-packagr":"^15.2.2","typescript":"~4.8.4","@types/node":"^16.11.45","@angular/cli":"^15.2.11","jasmine-core":"~4.4.0","karma-jasmine":"~5.1.0","@types/jasmine":"~4.3.0","@commitlint/cli":"^17.1.2","@cypress/schematic":"^2.2.0","@angular/compiler-cli":"^15.2.10","karma-chrome-launcher":"~3.1.1","@angular-eslint/builder":"^15.2.1","@angular/language-service":"^15.2.10","@typescript-eslint/parser":"^5.43.0","@angular-eslint/schematics":"^15.2.1","@commitlint/config-angular":"^17.1.0","conventional-changelog-cli":"^2.2.2","karma-jasmine-html-reporter":"^2.0.0","conventional-github-releaser":"^3.1.5","@angular-devkit/build-angular":"^15.2.11","@angular-eslint/eslint-plugin":"^15.2.1","@angular-eslint/template-parser":"^15.2.1","@typescript-eslint/eslint-plugin":"^5.43.0","karma-coverage-istanbul-reporter":"~3.0.3","@angular-eslint/eslint-plugin-template":"^15.2.1"},"_npmOperationalInternal":{"tmp":"tmp/ngx-scroll-to-demo_15.0.0_1749633271570_0.27462365662168664","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-06-11T09:14:31.457Z","modified":"2025-07-10T13:28:26.947Z","15.0.0":"2025-06-11T09:14:31.773Z"},"bugs":{"url":"https://github.com/BioComputingUP/ngx-scroll-to.git/issues"},"author":{"name":"Nicky Lenaers","email":"nicky@newgameplus.online"},"license":"MIT","homepage":"https://github.com/BioComputingUP/ngx-scroll-to.git#readme","repository":{"url":"git+https://github.com/BioComputingUP/ngx-scroll-to.git","type":"git"},"description":"Demo Application for @biocomputingup/ngx-scroll-to package.","contributors":[{"name":"Robbert van Caem"},{"name":"Adel Bouhraoua","email":"adelbouhraoua23@gmail.com"}],"maintainers":[{"email":"adelbouhraoua23@gmail.com","name":"quickinline"},{"email":"ivan.micetic@gmail.com","name":"ivanmicetic"},{"email":"zoubirimehdi64@gmail.com","name":"mehdi-sk"}],"readme":"
\n \n
\n
\n
ngx-scroll-to
\n
\n A simple Angular 4+ plugin enabling you to smooth scroll to any element on your page and enhance scroll-based features in your app. Works for Angular 4+, both AoT and SSR. No dependencies.\n
\n Support for Angular 15!\n \n \n Note: This library was forked from https://github.com/nicky-lenaers/ngx-scroll-to since it was not maintaned for a long time.\n \n \n
\n```\n\n## Basic Usage - Directive to Offset Only\nBesides scrolling to a specific element, it is also possible to scroll a given offset only. This can be achieved by an empty target and an offset:\n\n**my.component.html**\n\n```html\n\n```\n\n## Basic Usage - Service to Target\n**my.component.html**\n```html\n\n\n
\n You've reached your destination.\n
\n```\n\n**my.service.ts**\n\n```typescript\nimport { Injectable } from '@angular/core';\nimport { ScrollToService, ScrollToConfigOptions } from '@nicky-lenaers/ngx-scroll-to';\n\n@Injectable()\nexport class MyService {\n\n constructor(private scrollToService: ScrollToService) { }\n\n triggerScrollTo() {\n \n const config: ScrollToConfigOptions = {\n target: 'destination'\n };\n\n this.scrollToService.scrollTo(config);\n }\n}\n```\n\n## Basic Usage - Service to Offset Only\nJust like with the Directive, the Service can be used to scroll to an offset only instead of a given target element:\n\n**my.component.html**\n```html\n\n```\n\n**my.service.ts**\n\n```typescript\nimport { Injectable } from '@angular/core';\nimport { ScrollToService, ScrollToConfigOptions } from '@nicky-lenaers/ngx-scroll-to';\n\n@Injectable()\nexport class MyService {\n\n constructor(private scrollToService: ScrollToService) { }\n\n triggerScrollToOffsetOnly(offset: number = 0) {\n \n const config: ScrollToConfigOptions = {\n offset\n };\n\n this.scrollToService.scrollTo(config);\n }\n}\n```\n\n## Advanced Usage - Directive\n**my.component.ts**\n```typescript\nimport { ScrollToAnimationEasing, ScrollToEvent, ScrollToOffsetMap } from '@nicky-lenaers/ngx-scroll-to';\n\n@Component({\n selector: 'my-component',\n templateUrl: './my.component.html'\n})\nexport class MyComponent {\n\n ngxScrollToDestination: string;\n ngxScrollToEvent: ScrollToEvent;\n ngxScrollToDuration: number;\n ngxScrollToEasing: ScrollToAnimationEasing;\n ngxScrollToOffset: number;\n ngxScrollToOffsetMap: ScrollToOffsetMap;\n\n constructor() {\n\n this.ngxScrollToDestination = 'destination-1';\n this.ngxScrollToEvent = 'mouseenter';\n this.ngxScrollToDuration = 1500;\n this.ngxScrollToEasing = 'easeOutElastic';\n this.ngxScrollToOffset = 300;\n this.ngxScrollToOffsetMap = new Map();\n this.ngxScrollToOffsetMap\n .set(480, 100)\n .set(768, 200)\n .set(1240, 300)\n .set(1920, 400)\n\n }\n\n toggleDestination() {\n this.ngxScrollToDestination = this.ngxScrollToDestination === 'destination-1' ? 'destination-2' : 'destination-1';\n }\n}\n```\n\n\n**my.component.html**\n```html\n\n\n\n\n
\n```\n\n**my.service.ts**\n\n```typescript\nimport { Injectable } from '@angular/core';\nimport { ScrollToService, ScrollToConfigOptions } from '@nicky-lenaers/ngx-scroll-to';\n\n@Injectable()\nexport class MyService {\n\n constructor(private scrollToService: ScrollToService) { }\n\n triggerScrollTo() {\n \n /**\n * @see NOTE:1\n */\n const config: ScrollToConfigOptions = {\n container: 'custom-container',\n target: 'destination',\n duration: 650,\n easing: 'easeOutElastic',\n offset: 20\n };\n\n this.scrollToService.scrollTo(config);\n }\n}\n```\n**NOTE:1**\n\n*The `container` property is an optional property. By default, `ngxScrollTo` searches for the first scrollable parent `HTMLElement` with respect to the specified `target`. This should suffice in most cases. However, if multiple scrollable parents reside in the DOM tree, you have the degree of freedom the specify a specific container by using the `container` property, as used in the above example.*\n\n## Directive Attributes Map\n
\n\n## Error Handling\nIn some occasions, one might misspell a target or container selector string. Even though `ngx-scoll-to` will not be able to initiate the scrolling animation, you can catch the internally generated error and handle it as you please on the `Observable` chain returned from the `scrollTo` method.\n\n**faulty.service.ts**\n```typescript\nimport { Injectable } from '@angular/core';\nimport { ScrollToService } from '@nicky-lenaers/ngx-scroll-to';\n\n@Injectable()\nexport class FaultyService {\n\n constructor(private scrollToService: ScrollToService) { }\n\n triggerScrollTo() {\n \n this.scrollToService\n .scrollTo({\n target: 'faulty-id'\n })\n .subscribe(\n value => { console.log(value) },\n err => console.error(err) // Error is caught and logged instead of thrown\n );\n }\n}\n```\n\n## Directive Attribute Map Details\n#### `[ngxScrollTo]`\nThis value specifies the ID of the HTML Element to scroll to. Note the outer double quotes `\"\"` and the inner single quotes `''` in the above example(s). This enables you to dynamically set the string value based on a class property of your Component.\n\n#### `[ngxScrollToEvent]`\nThis value controls to event on which to trigger the scroll animation. Allowed values are:\n- `click`\n- `mouseenter`\n- `mouseover`\n- `mousedown`\n- `mouseup`\n- `dblclick`\n- `contextmenu`\n- `wheel`\n- `mouseleave`\n- `mouseout`\n\n#### `[ngxScrollToDuration]`\nThis value controls to duration of your scroll animation. Note that this value is in milliseconds.\n\n#### `[ngxScrollToEasing]`\nThis value controls a named easing logic function to control your animation easing. Allowed values are:\n- `easeInQuad`\n- `easeOutQuad`\n- `easeInOutQuad`\n- `easeInCubic`\n- `easeOutCubic`\n- `easeInOutCubic`\n- `easeInQuart`\n- `easeOutQuart`\n- `easeInOutQuart`\n- `easeInQuint`\n- `easeOutQuint`\n- `easeInOutQuint`\n- `easeOutElastic`\n\n#### `[ngxScrollToOffset]`\nThis value controls the offset with respect to the top of the destination HTML element. Note that this value is in pixels.\n\n#### `[ngxScrollToOffsetMap]`\nThis value allows you to control dynamic offsets based on the width of the device screen. The Map get's iterated over internally in a sequential fashion, meaning you need to supply key values in the order from low to high. The `key` of the `Map` defines the width treshold. The `value` of the `Map` defines the offset. Note that this value is in pixels.\n\n# Contributing\nPlease see [Contributing Guidelines](.github/CONTRIBUTING.md).\n\n# Code of Conduct\nPlease see [Code of Conduct](.github/CODE_OF_CONDUCT.md).\n\n# License\n [MIT](/LICENSE)\n","readmeFilename":"README.md"}
![](\"https://user-images.githubusercontent.com/2785350/28428760-ae908006-6d7a-11e7-92ec-174bec80740e.png\")
\n![\"Circle](\"https://img.shields.io/circleci/project/github/nicky-lenaers/ngx-scroll-to/master.svg?style=flat-square\")
\n \n ![\"GitHub](\"https://img.shields.io/github/release/nicky-lenaers/ngx-scroll-to.svg?style=flat-square\")
\n \n ![\"NPM](\"https://img.shields.io/npm/v/@nicky-lenaers/ngx-scroll-to.svg?style=flat-square\")
\n \n ![\"Production](\"https://img.shields.io/david/nicky-lenaers/ngx-scroll-to.svg?style=flat-square\")
\n \n ![\"Peer](\"https://img.shields.io/david/peer/nicky-lenaers/ngx-scroll-to.svg?style=flat-square\")
\n \n ![\"Development](\"https://img.shields.io/david/dev/nicky-lenaers/ngx-scroll-to.svg?style=flat-square\")
\n \n ![\"Optional](\"https://img.shields.io/david/optional/nicky-lenaers/ngx-scroll-to.svg?style=flat-square\")
\n \n ![\"NPM](\"https://img.shields.io/npm/dm/%40nicky-lenaers%2Fngx-scroll-to.svg?style=flat-square\")
\n \n ![\"License\"](\"https://img.shields.io/npm/l/@nicky-lenaers/ngx-scroll-to.svg?style=flat-square\")
\n \n