{"id":25258932,"url":"https://github.com/ProAngular/ngx-scroll-top","last_synced_at":"2025-10-27T03:30:48.726Z","repository":{"id":50288132,"uuid":"518523769","full_name":"ProAngular/ngx-scroll-top","owner":"ProAngular","description":"Configurable, lightweight back to top button for Angular projects.","archived":false,"fork":false,"pushed_at":"2022-08-03T07:02:18.000Z","size":6695,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-02-04T20:12:41.290Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/ProAngular.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},"funding":{"community_bridge":null,"github":["ProAngular","CodyTolene"],"issuehunt":null,"ko_fi":null,"liberapay":null,"open_collective":null,"otechie":null,"patreon":null,"tidelift":null,"custom":["https://www.paypal.me/CodyTolene"]}},"created_at":"2022-07-27T15:57:37.000Z","updated_at":"2024-06-11T15:20:38.000Z","dependencies_parsed_at":"2022-09-06T17:20:44.035Z","dependency_job_id":null,"html_url":"https://github.com/ProAngular/ngx-scroll-top","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProAngular%2Fngx-scroll-top","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProAngular%2Fngx-scroll-top/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProAngular%2Fngx-scroll-top/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProAngular%2Fngx-scroll-top/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ProAngular","download_url":"https://codeload.github.com/ProAngular/ngx-scroll-top/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238429561,"owners_count":19470979,"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":[],"created_at":"2025-02-12T07:01:38.684Z","updated_at":"2025-10-27T03:30:48.720Z","avatar_url":"https://github.com/ProAngular.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.ProAngular.com\" target=\"_blank\"\u003e\n    \u003cimg src=\"public/images/pro-angular-logo.png\" /\u003e\n  \u003c/a\u003e\n  \u003ch1 align=\"center\"\u003e\n    \u003ca href=\"https://www.ProAngular.com\" target=\"_blank\"\u003e\n      Pro Angular\n    \u003c/a\u003e: Scroll Top Button\n  \u003c/h1\u003e\n\u003c/p\u003e\n\n[![npm](https://badgen.net/badge/icon/npm?icon=npm\u0026label)](https://www.npmjs.com/@proangular/ngx-scroll-top)\n[![GitHub](https://badgen.net/badge/icon/GitHub?icon=github\u0026label)](https://github.com/ProAngular/ngx-scroll-top)\n[![TypeScript](https://badgen.net/badge/icon/TypeScript?icon=typescript\u0026label)](https://github.com/ProAngular/ngx-scroll-top/search?l=typescript)\n[![npm Version](https://badge.fury.io/js/@proangular%2Fngx-scroll-top.svg)](https://www.npmjs.com/@proangular/ngx-scroll-top)\n[![Node Version](https://badgen.net/npm/node/@proangular/ngx-scroll-top)](https://www.npmjs.com/@proangular/ngx-scroll-top)\n[![Package Downloads](https://badgen.net/npm/dw/@proangular/ngx-scroll-top)](https://www.npmjs.com/@proangular/ngx-scroll-top)\n[![Size](https://img.shields.io/bundlephobia/minzip/@proangular/ngx-scroll-top.svg)](https://bundlephobia.com/result?p=ProAngular/ngx-scroll-top)\n[![Demo Status](https://badgen.net/badge/Demo/Online/green)](https://www.ProAngular.com/demos/ngx-scroll-top)\n[![Website Status](https://img.shields.io/website?down_color=lightgrey\u0026down_message=Offline\u0026label=Website\u0026up_color=green\u0026up_message=Online\u0026url=https%3A%2F%2Fwww.proangular.com)](https://www.proangular.com)\n[![Gitter Chat](https://badges.gitter.im/ProAngular/lobby.svg)](https://gitter.im/ProAngular/community)\n[![Discord Chat](https://img.shields.io/discord/1003103094588055552?label=Discord)](https://discord.com/channels/1003103094588055552)\n[![Sponsors](https://img.shields.io/github/sponsors/proangular?label=Sponsors)](https://github.com/sponsors/ProAngular)\n[![License](https://img.shields.io/npm/l/express.svg?maxAge=2592000)](/LICENSE)\n[![GitHub Package Status](https://github.com/ProAngular/ngx-scroll-top/actions/workflows/on-merge-main-deploy-gpr.yml/badge.svg)](https://github.com/ProAngular/ngx-scroll-top/actions/workflows/on-merge-main-deploy-gpr.yml)\n[![npmjs Package Status](https://github.com/ProAngular/ngx-scroll-top/actions/workflows/on-merge-main-deploy-npmjs.yml/badge.svg)](https://github.com/ProAngular/ngx-scroll-top/actions/workflows/on-merge-main-deploy-npmjs.yml)\n\n## Table of Contents\n\n- [Description](#description)\n- [Demo](#demo)\n- [Installation](#installation)\n  - [Prerequisites](#prerequisites)\n  - [Install Scroll Top Component](#install-scroll-top-component)\n- [Usage](#usage)\n- [Component API](#api)\n- [Compatibility](#compatibility)\n- [Issues \u0026 Contribution](#development)\n- [Donations](#donations)\n- [Licensing](#licensing)\n- [Wrapping Up](#wrapping-up)\n\n## Description \u003ca name=\"description\"\u003e\u003c/a\u003e\n\nConfigurable, lightweight back to top button for Angular projects.\n\n\u003cp align=\"right\"\u003e[ \u003ca href=\"#index\"\u003eIndex\u003c/a\u003e ]\u003c/p\u003e\n\n\u003c!----------------------------------------------------------------------------\u003e\n\u003c!----------------------------------------------------------------------------\u003e\n\u003c!----------------------------------------------------------------------------\u003e\n\n## Demo \u003ca name=\"demo\"\u003e\u003c/a\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"public/images/demo-scroll-top.gif\" /\u003e\n\u003c/p\u003e\n\nLive demo here:\n[https://www.ProAngular.com/demos/ngx-scroll-top](https://www.ProAngular.com/demos/ngx-scroll-top)\n\n\u003cp align=\"right\"\u003e[ \u003ca href=\"#index\"\u003eIndex\u003c/a\u003e ]\u003c/p\u003e\n\n\u003c!----------------------------------------------------------------------------\u003e\n\u003c!----------------------------------------------------------------------------\u003e\n\u003c!----------------------------------------------------------------------------\u003e\n\n## Installation \u003ca name=\"installation\"\u003e\u003c/a\u003e\n\nUsing Node Package Manager ([NPM][url-node-js]) in a new terminal window run the\nfollowing commands to install the required dependencies.\n\n### Prerequisites \u003ca name=\"prerequisites\"\u003e\u003c/a\u003e\n\n**Angular Material**\n\nMore information on theming Angular Material:\nhttps://material.angular.io/guide/theming\n\n```bash\nng add @angular/material\n```\n\n### Install Scroll Top Component \u003ca name=\"install-scroll-top-component\"\u003e\u003c/a\u003e\n\n```bash\nng add @proangular/ngx-scroll-top@latest\n```\n\nor\n\n```bash\nnpm install @proangular/ngx-scroll-top --save\n```\n\n\u003cp align=\"right\"\u003e[ \u003ca href=\"#index\"\u003eIndex\u003c/a\u003e ]\u003c/p\u003e\n\n\u003c!----------------------------------------------------------------------------\u003e\n\u003c!----------------------------------------------------------------------------\u003e\n\u003c!----------------------------------------------------------------------------\u003e\n\n## Usage \u003ca name=\"usage\"\u003e\u003c/a\u003e\n\nDefault (blue button with white icon)\n\n```html\n\u003cngx-scroll-top\u003e\u003c/ngx-scroll-top\u003e\n```\n\nCustomization with optional inputs and icon\n\n```html\n\u003cngx-scroll-top\n  backgroundColor=\"#0D58C0\"\n  [bottomOffset]=\"footer.height\"\n  [displayAtYPosition]=\"1000\"\n  fontColor=\"#FFFAFA\"\n  fontSize=\"2rem\"\n  height=\"3rem\"\n  position=\"left\"\n  [zIndex]=\"1\"\n  width=\"3rem\"\n  \u003e\u0026#8686;\u003c/ngx-scroll-top\n\u003e\n```\n\n\u003cp align=\"right\"\u003e[ \u003ca href=\"#index\"\u003eIndex\u003c/a\u003e ]\u003c/p\u003e\n\n\u003c!----------------------------------------------------------------------------\u003e\n\u003c!----------------------------------------------------------------------------\u003e\n\u003c!----------------------------------------------------------------------------\u003e\n\n## Component API \u003ca name=\"api\"\u003e\u003c/a\u003e\n\n| Input                  | Value Typing          | Default Value           | Description                                                                                                                                        |\n| ---------------------- | --------------------- | ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **backgroundColor**    | string                | `'#0D58C0'` (dark-blue) | Background color of the back to top button. Define any `'x'` css property available for `'background-color: x'`.                                   |\n| **bottomOffset**       | string \\| number      | `'0px'`                 | Offset `px` from bottom of page when scrolled to bottom. For example this can be used to make sure the back to top button never overlaps a footer. |\n| **displayAtYPosition** | string \\| number      | `'420px'`               | The back to top button will not be displayed until the user scrolls to the provided Y (vertical `px`) coordinate on the page.                      |\n| **fontColor**          | string                | `'#FFFFFF'` (white)     | The font color for the nested content within the back to top button. Define any `'x'` css property available for `'color: x'`.                     |\n| **fontSize**           | string                | `'16px'`                | The font size for the nested content within the back to top button. Define any `'x'` css property available for `'font-size: x'`.                  |\n| **height**             | string                | `'40px'`                | Height of back to top button in string px format.                                                                                                  |\n| **position**           | `'left'` \\| `'right'` | `'right'`               | Position on-screen where the back to top button is displayed.                                                                                      |\n| **width**              | string                | `'40px'`                | Width of back to top button in string px format.                                                                                                   |\n| **zIndex**             | number                | `999`                   | Style the `z-index` for the back to top button as needed for correct layer height adjustment. This can be useful when working with sticky headers. |\n\n\u003cp align=\"right\"\u003e[ \u003ca href=\"#index\"\u003eIndex\u003c/a\u003e ]\u003c/p\u003e\n\n\u003c!----------------------------------------------------------------------------\u003e\n\u003c!----------------------------------------------------------------------------\u003e\n\u003c!----------------------------------------------------------------------------\u003e\n\n## Compatibility \u003ca name=\"compatibility\"\u003e\u003c/a\u003e\n\n| Angular version | @proangular/ngx-scroll-top | Install                                     |\n| --------------- | -------------------------- | ------------------------------------------- |\n| v20             | v20.0.0                    | `ng add @proangular/ngx-scroll-top@^20.0.0` |\n| v19             | v19.0.0                    | `ng add @proangular/ngx-scroll-top@^19.0.0` |\n| v18             | ------                     | Untested                                    |\n| v17             | ------                     | Untested                                    |\n| v16             | ------                     | Untested                                    |\n| v15             | ------                     | Untested                                    |\n| v14             | v1.x.x                     | `ng add @proangular/ngx-scroll-top@1.1.8`   |\n| v13             | v1.x.x                     | `ng add @proangular/ngx-scroll-top@1.1.8`   |\n| v12             | v1.x.x                     | `ng add @proangular/ngx-scroll-top@1.1.8`   |\n\n\u003cp align=\"right\"\u003e[ \u003ca href=\"#index\"\u003eIndex\u003c/a\u003e ]\u003c/p\u003e\n\n\u003c!----------------------------------------------------------------------------\u003e\n\u003c!----------------------------------------------------------------------------\u003e\n\u003c!----------------------------------------------------------------------------\u003e\n\n## Issues \u0026 Contribution \u003ca name=\"development\"\u003e\u003c/a\u003e\n\nPlease submit all issues, and feature requests here:\n[https://github.com/ProAngular/ngx-scroll-top/issues](https://github.com/ProAngular/ngx-scroll-top/issues)\n\nContribution:\n\n1. Clone the repo and create a new branch:\n\n- `git clone https://github.com/ProAngular/ngx-scroll-top.git`\n- `git checkout -b username/feature-or-bug-description`\n\n2. Bump up the version of package in `package.json` and `package-lock.json`,\n   commit all changes, push.\n\n- `git add -A`\n- `git commit -m \"My commit message\"`\n- `git push origin username/feature-or-bug-description`\n\n3. Submit code in published PR for review and approval. Add a good description\n   and link any possible user stories or bugs.\n\n- [Create a new pull request](https://github.com/ProAngular/ngx-scroll-top/compare).\n\n4. Allow CI actions to completely run and verify files.\n5. Add/ping reviewers and await approval.\n\nThank you for any and all contributions!\n\n\u003c!----------------------------------------------------------------------------\u003e\n\u003c!----------------------------------------------------------------------------\u003e\n\u003c!----------------------------------------------------------------------------\u003e\n\n## Licensing \u003ca name=\"licensing\"\u003e\u003c/a\u003e\n\nThis project is licensed under the **MIT** License. See the\n[LICENSE](LICENSE.md) file for the pertaining license text.\n\n`SPDX-License-Identifier: MIT`\n\n\u003cp align=\"right\"\u003e[ \u003ca href=\"#index\"\u003eIndex\u003c/a\u003e ]\u003c/p\u003e\n\n\u003c!----------------------------------------------------------------------------\u003e\n\u003c!----------------------------------------------------------------------------\u003e\n\u003c!----------------------------------------------------------------------------\u003e\n\n## Wrapping Up \u003ca name=\"wrapping-up\"\u003e\u003c/a\u003e\n\nThank you to the entire Angular team and community for such a great framework to\nbuild upon. If you have any questions, please let me know by opening an issue\n[here][url-new-issue].\n\n| Type                                                                      | Info                                                           |\n| :------------------------------------------------------------------------ | :------------------------------------------------------------- |\n| \u003cimg width=\"48\" src=\".github/images/ng-icons/email.svg\" /\u003e                | webmaster@codytolene.com                                       |\n| \u003cimg width=\"48\" src=\".github/images/simple-icons/github.svg\" /\u003e           | https://github.com/sponsors/CodyTolene                         |\n| \u003cimg width=\"48\" src=\".github/images/simple-icons/buymeacoffee.svg\" /\u003e     | https://www.buymeacoffee.com/codytolene                        |\n| \u003cimg width=\"48\" src=\".github/images/simple-icons/bitcoin-btc-logo.svg\" /\u003e | bc1qfx3lvspkj0q077u3gnrnxqkqwyvcku2nml86wmudy7yf2u8edmqq0a5vnt |\n\nFin. Happy programming friend!\n\nCody Tolene\n\n\u003c!-- LINKS --\u003e\n\n[url-new-issue]: https://github.com/ProAngular/ngx-scroll-top/issues\n[url-node-js]: https://nodejs.org/\n","funding_links":["https://github.com/sponsors/ProAngular","https://github.com/sponsors/CodyTolene","https://www.paypal.me/CodyTolene","https://www.buymeacoffee.com/codytolene"],"categories":["Recently Updated","Third Party Components"],"sub_categories":["[Feb 10, 2025](/content/2025/02/10/README.md)","Scroll"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FProAngular%2Fngx-scroll-top","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FProAngular%2Fngx-scroll-top","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FProAngular%2Fngx-scroll-top/lists"}