@proangular/ngx-scroll-top

<div align="center"> <a href="https://www.ProAngular.com" target="_blank"> <img src="https://raw.githubusercontent.com/ProAngular/ngx-scroll-top/refs/heads/main/public/images/pro-angular-logo.png" /> </a> <h1 align="center"> @proangular/ngx-scroll-top </h1> <a href="https://www.ProAngular.com" target="_blank"> ProAngular </a>  |   <a href="https://github.com/ProAngular/ngx-scroll-top" target="_blank"> GitHub Repo </a>  |   <a href="https://www.npmjs.com/@proangular/ngx-scroll-top" target="_blank"> NPM Package </a>  |   <a href="https://www.ProAngular.com/demos/ngx-scroll-top" target="_blank"> Demo Page </a> A simple, configurable, lightweight back to top button for your Angular projects. </div>    <a href="https://www.npmjs.com/@proangular/ngx-scroll-top" target="_blank"> <img src="https://badge.fury.io/js/@proangular%2Fngx-scroll-top.svg" > </a> <a href="https://bundlephobia.com/result?p=ProAngular/ngx-scroll-top" target="_blank"> <img src="https://img.shields.io/bundlephobia/minzip/@proangular/ngx-scroll-top.svg" > </a> <a href="/LICENSE" target="_blank"> <img src="https://img.shields.io/npm/l/express.svg?maxAge=2592000" > </a>     <code>ng add @proangular/ngx-scroll-top</code> <img src="https://raw.githubusercontent.com/ProAngular/ngx-scroll-top/refs/heads/main/public/images/demo-scroll-top.gif" /> <a href="https://www.ProAngular.com/demos/ngx-scroll-top" target="_blank">Click here to preview it live!</a>    ## 📇 Index <a name="index"></a> - [📦 Installation](#installation) - [📋 Prerequisites](#prerequisites) - [📥 Install Scroll Top Component](#install-scroll-top-component) - [💻 Usage](#usage) - [📚 Component API](#api) - [🔄 Compatibility](#compatibility) - [🤝 Issues & Contribution](#development) - [⚖️ Licensing](#licensing) - [🏁 Wrapping Up](#wrapping-up)    ## 📦 Installation <a name="installation"></a> Using Node Package Manager ([NPM][url-node-js]) in a new terminal window run the following commands to install the required dependencies. ### 📋 Prerequisites <a name="prerequisites"></a> **Angular Material** More information on theming Angular Material: https://material.angular.io/guide/theming ```bash ng add @angular/material ``` ### 📥 Install Scroll Top Component <a name="install-scroll-top-component"></a> ```bash ng add @proangular/ngx-scroll-top@latest ``` or ```bash npm install @proangular/ngx-scroll-top --save ``` [ <a href="#index">🔍 Index</a> ]    ## 💻 Usage <a name="usage"></a> Default (blue button with white icon) ```html <ngx-scroll-top></ngx-scroll-top> ``` Customization with optional inputs and icon ```html <ngx-scroll-top backgroundColor="#0D58C0" [bottomOffset]="footer.height" [displayAtYPosition]="1000" fontColor="#FFFAFA" fontSize="2rem" height="3rem" position="left" [zIndex]="1" width="3rem" >⇮</ngx-scroll-top > ``` [ <a href="#index">🔍 Index</a> ]    ## 📚 Component API <a name="api"></a> | Input | Value Typing | Default Value | Description | | ---------------------- | ---------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | | **backgroundColor** | string | `#0D58C0` | Background color of the back to top button. Define any 'x' css property available for 'background-color: x'. | | **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. | | **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. | | **fontColor** | string | `#FFFFFF` | The font color for the nested content within the back to top button. Define any 'x' css property available for 'color: x'. | | **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'. | | **height** | string | `32px` \| `1rem` | Height of back to top button in string format. | | **position** | left \| right | `right` | Position on-screen where the back to top button is displayed. | | **width** | string | `32px` \| `1rem` | Width of back to top button in string format. | | **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. | [ <a href="#index">🔍 Index</a> ]    ## 🔄 Compatibility <a name="compatibility"></a> | Angular version | @proangular/ngx-scroll-top | Install | | --------------- | -------------------------- | ----------------------------------------- | | v21 | v21.X | `ng add @proangular/ngx-scroll-top@^21` | | v20 | v20.X | `ng add @proangular/ngx-scroll-top@^20` | | v19 | v19.X | `ng add @proangular/ngx-scroll-top@^19` | | v18 | ------ | Untested | | v17 | ------ | Untested | | v16 | ------ | Untested | | v15 | ------ | Untested | | v14 | v1.x.x | `ng add @proangular/ngx-scroll-top@1.1.8` | | v13 | v1.x.x | `ng add @proangular/ngx-scroll-top@1.1.8` | | v12 | v1.x.x | `ng add @proangular/ngx-scroll-top@1.1.8` | [ <a href="#index">🔍 Index</a> ]    ## 🤝 Issues & Contribution <a name="development"></a> Please submit all issues, and feature requests here: [https://github.com/ProAngular/ngx-scroll-top/issues](https://github.com/ProAngular/ngx-scroll-top/issues) Contribution: 1. Clone the repo and create a new branch: - `git clone https://github.com/ProAngular/ngx-scroll-top.git` - `git checkout -b username/feature-or-bug-description` 2. Bump up the version of package in `package.json` and `package-lock.json`, commit all changes, push. - `git add -A` - `git commit -m "My commit message"` - `git push origin username/feature-or-bug-description` 3. Submit code in published PR for review and approval. Add a good description and link any possible user stories or bugs. - [Create a new pull request](https://github.com/ProAngular/ngx-scroll-top/compare). 4. Allow CI actions to completely run and verify files. 5. Add/ping reviewers and await approval. Thank you for any and all contributions! [ <a href="#index">🔍 Index</a> ]    ## ⚖️ Licensing <a name="licensing"></a> This project is licensed under the **MIT** License. See the [LICENSE](LICENSE.md) file for the pertaining license text. `SPDX-License-Identifier: MIT` [ <a href="#index">🔍 Index</a> ]    ## 🏁 Wrapping Up <a name="wrapping-up"></a> Thank you to the entire Angular team and community for such a great framework to build upon. If you have any questions, please let me know by opening an issue [here][url-new-issue]. | Type | Info | | :---------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- | | <img width="48" src="https://raw.githubusercontent.com/ProAngular/ngx-scroll-top/refs/heads/main/.github/images/ng-icons/email.svg" /> | webmaster@codytolene.com | | <img width="48" src="https://raw.githubusercontent.com/ProAngular/ngx-scroll-top/refs/heads/main/.github/images/simple-icons/github.svg" /> | https://github.com/sponsors/CodyTolene | | <img width="48" src="https://raw.githubusercontent.com/ProAngular/ngx-scroll-top/refs/heads/main/.github/images/simple-icons/buymeacoffee.svg" /> | https://www.buymeacoffee.com/codytolene | | <img width="48" src="https://raw.githubusercontent.com/ProAngular/ngx-scroll-top/refs/heads/main/.github/images/simple-icons/bitcoin-btc-logo.svg" /> | bc1qfx3lvspkj0q077u3gnrnxqkqwyvcku2nml86wmudy7yf2u8edmqq0a5vnt | Fin. Happy programming friend! Cody Tolene  [url-new-issue]: https://github.com/ProAngular/ngx-scroll-top/issues [url-node-js]: https://nodejs.org/