{"id":13808774,"url":"https://github.com/bartholomej/ngx-scrolltop","last_synced_at":"2025-04-09T09:09:38.543Z","repository":{"id":35115375,"uuid":"208624825","full_name":"bartholomej/ngx-scrolltop","owner":"bartholomej","description":"Lightweight, Material Design inspired \"go to top button\". No dependencies. Pure Angular!","archived":false,"fork":false,"pushed_at":"2025-02-10T22:45:00.000Z","size":6014,"stargazers_count":30,"open_issues_count":13,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-02T08:09:11.417Z","etag":null,"topics":["angular","angular14","angular15","angular16","angular17","angular18","angular19","angular2","go-to-top","goodbye-ngcc","gototop","material","material-design","ngx","sass","scroll-to-top","scroll-top","scrolltop","svg"],"latest_commit_sha":null,"homepage":"http://bartholomej.github.io/ngx-scrolltop/","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/bartholomej.png","metadata":{"files":{"readme":"README.md","changelog":null,"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,"publiccode":null,"codemeta":null},"funding":{"github":["bartholomej"],"patreon":null,"open_collective":null,"ko_fi":"bartholomej","tidelift":null,"custom":["https://www.paypal.me/bartholomej"]}},"created_at":"2019-09-15T16:44:37.000Z","updated_at":"2025-02-10T22:34:57.000Z","dependencies_parsed_at":"2023-12-13T22:07:09.608Z","dependency_job_id":"ff59f7e7-b62d-49bc-bed6-15f5ff5746c5","html_url":"https://github.com/bartholomej/ngx-scrolltop","commit_stats":{"total_commits":305,"total_committers":4,"mean_commits":76.25,"dds":0.05573770491803276,"last_synced_commit":"f34ccb072a0c1bdb1d3a43600afba6ad8f9e78a4"},"previous_names":[],"tags_count":64,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bartholomej%2Fngx-scrolltop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bartholomej%2Fngx-scrolltop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bartholomej%2Fngx-scrolltop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bartholomej%2Fngx-scrolltop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bartholomej","download_url":"https://codeload.github.com/bartholomej/ngx-scrolltop/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247998101,"owners_count":21030735,"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":["angular","angular14","angular15","angular16","angular17","angular18","angular19","angular2","go-to-top","goodbye-ngcc","gototop","material","material-design","ngx","sass","scroll-to-top","scroll-top","scrolltop","svg"],"created_at":"2024-08-04T01:01:51.572Z","updated_at":"2025-04-09T09:09:38.527Z","avatar_url":"https://github.com/bartholomej.png","language":"TypeScript","funding_links":["https://github.com/sponsors/bartholomej","https://ko-fi.com/bartholomej","https://www.paypal.me/bartholomej"],"categories":["Angular","Third Party Components"],"sub_categories":["Related community list","Scroll"],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"/_assets/ngx-scrolltop_logo.svg?sanitize=true\" width=\"120\"\u003e\n  \u003ch1 align=\"center\"\u003eAngular ScrollTop Button\u003c/h1\u003e\n\u003c/p\u003e\n\n[![npm version](https://badge.fury.io/js/ngx-scrolltop.svg)](https://badge.fury.io/js/ngx-scrolltop)\n[![NPM Downloads](https://img.shields.io/npm/dm/ngx-scrolltop.svg)](https://www.npmjs.com/ngx-scrolltop)\n[![Join the chat at https://gitter.im/ngx-scrolltop/Lobby](https://badges.gitter.im/ngx-scrolltop/Lobby.svg)](https://gitter.im/ngx-scrolltop/Lobby?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n![](https://github.com/bartholomej/ngx-scrolltop/workflows/Build%20\u0026%20Tests%20\u0026%20Publish/badge.svg)\n[![volkswagen status](https://auchenberg.github.io/volkswagen/volkswargen_ci.svg?v=1)](https://github.com/auchenberg/volkswagen)\n\n\u003e Lightweight, **Material Design inspired button for scroll-to-top** of the page.\n\u003e No dependencies.\n\u003e **Pure Angular!**\n\n\u003e ✓ **Angular 19**, **Signals**, **Standalone Components** and Angular Universal (**SSR**) compatible\n\nJust hit the button to smoothly scroll back to the top of the page. [Here's the demo.](http://bartholomej.github.io/ngx-scrolltop/)\n\n- No dependencies! _(only smooth scroll-behavior polyfill for old iOS versions)_\n- Lightweight _(~2 kB gzipped)_\n- **Angular 19** compatible\n- **Standalone Components** compatible\n- **Signals** compatible\n- Material Design inspired\n- `@angular/material` compatible ([example](#angular-material-example-directive))\n- Component or directive way\n- Smoothly animated\n- a11y ready\n- Highly customizable [options](#%EF%B8%8F-options)...\n\n![Demo animation](https://github.com/bartholomej/material-scrollTop/blob/master/demo/images/material-scrolltop-animation.gif?raw=true)\n\n## 🎯 Demo (example)\n\nWatch this [demo page](http://bartholomej.github.io/ngx-scrolltop/)\n\nOr play with it live on [stackblitz.com/edit/ngx-scrolltop](https://stackblitz.com/edit/ngx-scrolltop?file=src/app/app.component.html)\n\n## 📦 Install\n\n\u003e You're not using the latest version of Angular?\n\u003e [See our Angular compatibility instructions…](#compatibility)\n\nVia **npm** or **yarn**\n\n```bash\nnpm install ngx-scrolltop --save # for lastest Angular only! See our compatibility table\n\n# yarn add ngx-scrolltop\n```\n\n### Compatibility\n\n| Angular version | ngx-scrolltop | Install                            |\n| --------------- | ------------- | ---------------------------------- |\n| ng19            | v19.x.x       | `npm install ngx-scrolltop@latest` |\n| ng18            | v18.x.x       | `npm install ngx-scrolltop@18`     |\n| ng17            | v17.x.x       | `npm install ngx-scrolltop@17`     |\n| ng16            | v6.x.x        | `ng add ngx-scrolltop@6`           |\n| ng15            | v6.x.x        | `ng add ngx-scrolltop@6`           |\n| ng14            | v4.x.x        | `ng add ngx-scrolltop@4`           |\n| ng13            | v4.x.x        | `ng add ngx-scrolltop@4`           |\n| ng12            | v4.x.x        | `ng add ngx-scrolltop@4`           |\n| ng5 – ng11      | v2.x.x        | `ng add ngx-scrolltop@2`           |\n\n## 🗜️ Setup and usage (`Standalone` or `Modules`)\n\n\u003e You have some options how to use this library.\n\u003e As a component or as a directive.\n\n\u003e You can also use it as a Standalone component (new angular way) or as a module (the original angular way).\n\n### Standalone Component\n\nIn your root standalone component (e.g. `app.component.ts`) you need to add `NgxScrollTopComponent` into your `imports` array.\n\n```diff\n...\n+ import { NgxScrollTopComponet } from 'ngx-scrolltop';\n...\n\n@Component({\n  selector: 'app',\n  standalone: true,\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.scss'],\n  imports: [\n+   NgxScrollTopComponent\n  ],\n})\nexport class AppComponent { }\n```\n\nAnd then in `app.component.html` you just need to add your new button. Usually at the end of your file.\n\n```html\n\u003cngx-scrolltop\u003e\u003c/ngx-scrolltop\u003e\n```\n\n_See [options](#%EF%B8%8F-options) and [examples](#-examples) for more details..._\n\n### Standalone Directive\n\nIn your root standalone component (e.g. `app.component.ts`) you need to add `NgxScrollTopDirective` into your `imports` array.\n\n```diff\n...\n+ import { NgxScrollTopDirective } from 'ngx-scrolltop';\n...\n\n@Component({\n  selector: 'app',\n  standalone: true,\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.scss'],\n  imports: [\n+   NgxScrollTopDirective\n  ],\n})\nexport class AppComponent { }\n```\n\nAnd then in `app.component.html` you just need to create your new custom element... _(e.g. `\u003cspan\u003e`, `\u003cdiv\u003e`, `\u003cbutton\u003e`, ...)_\n\n```html\n\u003cspan ngxScrollTop class=\"my-custom-element-with-my-style__no-lib-style-applied-here\"\u003e\n  ↑ My Custom Element. ↑\n\u003c/span\u003e\n```\n\n**Important note**: _No style applied, everything is up to you. Of course I recommend `position: fixed`, ..._\n\n_See more in [examples](#-examples)_\n\n### Modules (the original Angular way)\n\n\u003e This is the original Angular way how to import libraries (via modules).\n\u003e You can use it as a component or as a directive as well.\n\nIn your root module (e.g. `app.module.ts`) you need to add `NgxScrollTopModule` into your `imports` array.\n\n```diff\n...\n+ import { NgxScrollTopModule } from 'ngx-scrolltop';\n...\n\n@NgModule({\n  imports: [\n    ...\n+   NgxScrollTopModule\n  ],\n  ...\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n_Next steps you can see above in [Standalone Component](#standalone-component) or [Standalone Directive](#standalone-directive)_ or in [examples](#-examples).\n\n## ⚙️ Options\n\n### Component\n\n| Option              | Type                                                                           | Default     | Description                                                                                                                                                                                              |\n| ------------------- | ------------------------------------------------------------------------------ | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **mode**            | `'smart'` \\| `'classic'`                                                       | `'classic'` | **Smart** mode shows button only when you scroll more than two screens down and then you will try to go back to top. **Classic** mode shows button immediately when you scroll at least one screen down. |\n| **backgroundColor** | string                                                                         | #212121     | Background color (you can use all values for `backgroud-color` css property). _You can override `theme` color_                                                                                           |\n| **symbolColor**     | string                                                                         | #fafafa     | Symbol color (you can use all values for `fill` svg property). _You can override `theme` color_                                                                                                          |\n| **size**            | number                                                                         | 40          | Button size [in pixels]. _(Symbol will be resized automatically_)                                                                                                                                        |\n| ~~**symbol**~~      | ~~string~~                                                                     |             | ~~You can use utf8 chars for customizing symbol. For example: `↑`~~ Removed in v2.0.0. Use _content projection_. See example [here](#symbol)                                                             |\n| **position**        | `'left'` \\| `'right'`                                                          | `'right'`   | Left or right, that is the question...                                                                                                                                                                   |\n| **theme**           | [NgxScrollTopTheme](projects/ngx-scrolltop/src/lib/ngx-scrolltop.interface.ts) | `'gray'`    | Choose from [official Material color themes](https://material.io/resources/color)                                                                                                                        |\n\n#### Symbol\n\nYou can use _content projection_ for your own symbol.\n\n```html\n\u003cngx-scrolltop\u003e ↑ \u003c/ngx-scrolltop\u003e\n```\n\nOr you can even use your own components or fonts (e.g. fontAwesome)\n\n```html\n\u003cngx-scrolltop\u003e\n  \u003ci class=\"fa fa-arrow-up\"\u003e\u003c/i\u003e\n\u003c/ngx-scrolltop\u003e\n```\n\n### Directive\n\n| Option                 | Type                     | Default     | Description                                                                                                                                                                                             |\n| ---------------------- | ------------------------ | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **[ngxScrollTopMode]** | `'smart'` \\| `'classic'` | `'classic'` | **Smart** mode shows button only when you scroll more than two screens down and then you will try to go back to top.**Classic** mode shows button immediately when you scroll at least one screen down. |\n\n## 🎨 Examples\n\n### Advanced example (component)\n\n**app.component.html**\n\n```html\n\u003cngx-scrolltop\n  [size]=\"50\"\n  backgroundColor=\"#33691e\"\n  symbolColor=\"#fff\"\n  mode=\"smart\"\n  position=\"left\"\n  theme=\"pink\"\n\u003e\n  ↑\n\u003c/ngx-scrolltop\u003e\n```\n\n### Angular Material example (directive)\n\n_[@angular/material](https://material.angular.io/components/button/overview) required_\n\n**app.component.html**\n\n```html\n\u003cbutton\n  ngxScrollTop\n  [ngxScrollTopMode]=\"'smart'\"\n  class=\"my-custom-style\"\n  color=\"primary\"\n  mat-mini-fab\n\u003e\n  top\n\u003c/button\u003e\n```\n\n**app.component.scss**\n\n```css\n.my-custom-style {\n  position: fixed;\n  right: 20px;\n  bottom: 20px;\n}\n```\n\n## 🔌 Dependencies\n\nPure Angular! _(with smooth scroll-behaviour polyfill for iOS)_\n\n## 🙋 FAQ\n\n### Old version of Angular\n\n#### Error\n\nIf you are using older Angular (5 – 11) you will see this error on build or start:\n\n\u003e ERROR in node_modules/ngx-scrolltop/lib/ngx-scrolltop.core.service.d.ts:13:21 - error TS2694: Namespace '\"/Users/user/projects/my-project/node_modules/@angular/core/core\"' has no exported member 'ɵɵFactoryDeclaration'.\n\n#### Solution\n\nEasy! Use compatibility version of this library `npm install ngx-scrolltop@2 --save`\n\n[See our Angular compatibility instructions…](#compatibility)\n\n#### Error\n\nIf you are using Angular 14 with latest ngx-scrolltop library, you will see this error on build or start:\n\n```bash\nError: node_modules/ngx-scrolltop/lib/ngx-scrolltop.component.d.ts:21:18 - error TS2707: Generic type 'ɵɵComponentDeclaration' requires between 7 and 8 type arguments.\n\n21     static ɵcmp: i0.ɵɵComponentDeclaration\u003cNgxScrollTopComponent, \"ngx-scrolltop\", never, { \"backgroundColor\": \"backgroundColor\"; \"symbolColor\": \"symbolColor\"; \"size\": \"size\"; \"symbol\": \"symbol\"; \"position\": \"position\"; \"theme\": \"theme\"; \"mode\": \"mode\"; }, {}, never, [\"*\"], false, never\u003e;\n                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n\n\nError: node_modules/ngx-scrolltop/lib/ngx-scrolltop.directive.d.ts:17:18 - error TS2707: Generic type 'ɵɵDirectiveDeclaration' requires between 6 and 8 type arguments.\n\n17     static ɵdir: i0.ɵɵDirectiveDeclaration\u003cNgxScrollTopDirective, \"[ngxScrollTop]\", never, { \"mode\": \"ngxScrollTopMode\"; }, {}, never, never, false, never\u003e;\n```\n\n#### Solution\n\nEasy! Use compatibility version of this library `npm install ngx-scrolltop@4 --save`\n\n[See our Angular compatibility instructions…](#compatibility)\n\n## ⭐️ Show your support\n\nGive a ⭐️ if this project helped you!\n\nOr if you are brave enough consider [making a donation](https://github.com/sponsors/bartholomej) for some 🍺 or 🍵 ;)\n\n## 📝 License\n\nCopyright \u0026copy; 2025 [Lukas Bartak](http://bartweb.cz)\n\nProudly powered by nature 🗻, wind 💨, tea 🍵 and beer 🍺 ;)\n\nAll contents are licensed under the [MIT license].\n\n[mit license]: LICENSE\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbartholomej%2Fngx-scrolltop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbartholomej%2Fngx-scrolltop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbartholomej%2Fngx-scrolltop/lists"}