{"_id":"@biocomputingup/ngx-scroll-to","_rev":"5-c23078a44acf0df03223e43e3603e062","name":"@biocomputingup/ngx-scroll-to","dist-tags":{"latest":"16.0.0"},"versions":{"15.0.0":{"name":"@biocomputingup/ngx-scroll-to","version":"15.0.0","keywords":["ng","ngx","ngx-scroll-to","scroll","scrolling","scroll-to","smooth scroll","smooth-scroll","smooth scrolling","smooth-scrolling","smooth","angular","angular2","angular 2","angular4","angular 4","angular5","angular 5","angular6","angular 6","angular7","angular 7","angular8","angular 8","angular9","angular 9","angular10","angular 10","angular11","angular 11","angular12","angular 12","angular13","angular 13","angular14","angular 14","angular15","angular 15"],"author":{"name":"Nicky Lenaers","email":"nicky@newgameplus.online"},"license":"MIT","_id":"@biocomputingup/ngx-scroll-to@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":"a9685c5329639a4264c8551606cc9e1645227109","tarball":"https://registry.npmjs.org/@biocomputingup/ngx-scroll-to/-/ngx-scroll-to-15.0.0.tgz","fileCount":33,"integrity":"sha512-Rs3CbeQXqyITJV7W9MAu2T8am0idYnTl0jgUjIgEYZoxADr88qf5HL4uNJ3RGps6gvEfXIiWdX/llo5FOU86cA==","signatures":[{"sig":"MEQCIHYQYe++gWZDgO8liFk/hdAtVtCAexEQZSDl4CLKgwNlAiBUE1SycBW6FdC0ck7VbLE79xbQ8hmb64QCBygGmKnwow==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":277719},"es2020":"fesm2020/biocomputingup-ngx-scroll-to.mjs","module":"fesm2015/biocomputingup-ngx-scroll-to.mjs","engines":{"node":">=16.18.0","yarn":">=1.22.18"},"esm2020":"esm2020/biocomputingup-ngx-scroll-to.mjs","exports":{".":{"node":"./fesm2015/biocomputingup-ngx-scroll-to.mjs","types":"./index.d.ts","es2015":"./fesm2015/biocomputingup-ngx-scroll-to.mjs","es2020":"./fesm2020/biocomputingup-ngx-scroll-to.mjs","default":"./fesm2020/biocomputingup-ngx-scroll-to.mjs","esm2020":"./esm2020/biocomputingup-ngx-scroll-to.mjs"},"./package.json":{"default":"./package.json"}},"private":false,"typings":"index.d.ts","_npmUser":{"name":"quickinline","email":"adelbouhraoua23@gmail.com"},"fesm2015":"fesm2015/biocomputingup-ngx-scroll-to.mjs","fesm2020":"fesm2020/biocomputingup-ngx-scroll-to.mjs","repository":{"url":"git+https://github.com/biocomputingup/ngx-scroll-to.git","type":"git"},"description":"A simple Angular 4+ plugin enabling you to smooth scroll to any element on your page and enhance scroll-based features in your app.","directories":{},"sideEffects":false,"dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^14.0.0","@angular/common":"^14.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ngx-scroll-to_15.0.0_1749631159373_0.5099282107314895","host":"s3://npm-registry-packages-npm-production"}},"15.0.1":{"name":"@biocomputingup/ngx-scroll-to","version":"15.0.1","keywords":["ng","ngx","ngx-scroll-to","scroll","scrolling","scroll-to","smooth scroll","smooth-scroll","smooth scrolling","smooth-scrolling","smooth","angular","angular2","angular 2","angular4","angular 4","angular5","angular 5","angular6","angular 6","angular7","angular 7","angular8","angular 8","angular9","angular 9","angular10","angular 10","angular11","angular 11","angular12","angular 12","angular13","angular 13","angular14","angular 14","angular15","angular 15"],"author":{"name":"Nicky Lenaers","email":"nicky@newgameplus.online"},"license":"MIT","_id":"@biocomputingup/ngx-scroll-to@15.0.1","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":"ca8163d164457391c39918bf45c4be963f5489b5","tarball":"https://registry.npmjs.org/@biocomputingup/ngx-scroll-to/-/ngx-scroll-to-15.0.1.tgz","fileCount":33,"integrity":"sha512-nFeHZg82Gu7oRDX7cwqa0uR0te0Cpp96h3y0IR+DMvdQPB4Mmi4pQSxZ0AfT02IZf7+zVQpntnR8hUrxMsiMWg==","signatures":[{"sig":"MEUCIBwbg5PFCBNnWXWe9YnViiFL/RsaIhrIMbmrZCpQEH0mAiEAoF5XJRzwpU7SBfZmjILPwkAlNPSUSL2PnqBFHVV3l70=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":277716},"es2020":"fesm2020/biocomputingup-ngx-scroll-to.mjs","module":"fesm2015/biocomputingup-ngx-scroll-to.mjs","engines":{"node":">=16.18.0","yarn":">=1.22.18"},"esm2020":"esm2020/biocomputingup-ngx-scroll-to.mjs","exports":{".":{"node":"./fesm2015/biocomputingup-ngx-scroll-to.mjs","types":"./index.d.ts","es2015":"./fesm2015/biocomputingup-ngx-scroll-to.mjs","es2020":"./fesm2020/biocomputingup-ngx-scroll-to.mjs","default":"./fesm2020/biocomputingup-ngx-scroll-to.mjs","esm2020":"./esm2020/biocomputingup-ngx-scroll-to.mjs"},"./package.json":{"default":"./package.json"}},"private":false,"typings":"index.d.ts","_npmUser":{"name":"quickinline","email":"adelbouhraoua23@gmail.com"},"fesm2015":"fesm2015/biocomputingup-ngx-scroll-to.mjs","fesm2020":"fesm2020/biocomputingup-ngx-scroll-to.mjs","repository":{"url":"git+https://github.com/BioComputingUP/ngx-scroll-to.git","type":"git"},"description":"A simple Angular 4+ plugin enabling you to smooth scroll to any element on your page and enhance scroll-based features in your app.","directories":{},"sideEffects":false,"dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^15.0.0","@angular/common":"^15.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ngx-scroll-to_15.0.1_1749634232072_0.9478530473930171","host":"s3://npm-registry-packages-npm-production"}},"16.0.0":{"name":"@biocomputingup/ngx-scroll-to","version":"16.0.0","keywords":["ng","ngx","ngx-scroll-to","scroll","scrolling","scroll-to","smooth scroll","smooth-scroll","smooth scrolling","smooth-scrolling","smooth","angular","angular2","angular 2","angular4","angular 4","angular5","angular 5","angular6","angular 6","angular7","angular 7","angular8","angular 8","angular9","angular 9","angular10","angular 10","angular11","angular 11","angular12","angular 12","angular13","angular 13","angular14","angular 14","angular15","angular 15","angular16","angular 16"],"author":{"name":"Nicky Lenaers","email":"nicky@newgameplus.online"},"license":"MIT","_id":"@biocomputingup/ngx-scroll-to@16.0.0","maintainers":[{"name":"quickinline","email":"adelbouhraoua23@gmail.com"},{"name":"ivanmicetic","email":"ivan.micetic@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":"d972af1c2977bc92971f932ea33768dbad7554dd","tarball":"https://registry.npmjs.org/@biocomputingup/ngx-scroll-to/-/ngx-scroll-to-16.0.0.tgz","fileCount":30,"integrity":"sha512-8TZML8Dace7F6Q7IwOHzamI+QDiTtDF6g6yWyfxyBFurqXOm+HS+slmX34vaBQx3EhuuqHBUL8JtNgpFC24VeA==","signatures":[{"sig":"MEUCIQCoedDhHspeGTjmK13B52/yNihUzB6F1BzfjTMx31D8agIgOVR53Niiw3gARXibfl6rxvCxeo+pN5t/nJdChYQF/J8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":207859},"module":"fesm2022/biocomputingup-ngx-scroll-to.mjs","engines":{"node":">=16.18.0","yarn":">=1.22.18"},"exports":{".":{"esm":"./esm2022/biocomputingup-ngx-scroll-to.mjs","types":"./index.d.ts","default":"./fesm2022/biocomputingup-ngx-scroll-to.mjs","esm2022":"./esm2022/biocomputingup-ngx-scroll-to.mjs"},"./package.json":{"default":"./package.json"}},"private":false,"typings":"index.d.ts","_npmUser":{"name":"quickinline","actor":{"name":"quickinline","type":"user","email":"adelbouhraoua23@gmail.com"},"email":"adelbouhraoua23@gmail.com"},"repository":{"url":"git+https://github.com/BioComputingUP/ngx-scroll-to.git","type":"git"},"description":"A simple Angular 4+ plugin enabling you to smooth scroll to any element on your page and enhance scroll-based features in your app.","directories":{},"sideEffects":false,"dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^16.0.0","@angular/common":"^16.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ngx-scroll-to_16.0.0_1750699183349_0.168045269403035","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-06-11T08:39:19.257Z","modified":"2025-07-10T13:28:26.020Z","15.0.0":"2025-06-11T08:39:19.553Z","15.0.1":"2025-06-11T09:30:32.283Z","16.0.0":"2025-06-23T17:19:43.598Z"},"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","keywords":["ng","ngx","ngx-scroll-to","scroll","scrolling","scroll-to","smooth scroll","smooth-scroll","smooth scrolling","smooth-scrolling","smooth","angular","angular2","angular 2","angular4","angular 4","angular5","angular 5","angular6","angular 6","angular7","angular 7","angular8","angular 8","angular9","angular 9","angular10","angular 10","angular11","angular 11","angular12","angular 12","angular13","angular 13","angular14","angular 14","angular15","angular 15","angular16","angular 16"],"repository":{"url":"git+https://github.com/BioComputingUP/ngx-scroll-to.git","type":"git"},"description":"A simple Angular 4+ plugin enabling you to smooth scroll to any element on your page and enhance scroll-based features in your app.","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! & 16!\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