📇 Index

• 📦 Installation
  • 📋 Prerequisites
  • 📥 Install Scroll Top Component
• 💻 Usage
• 📚 Component API
• 🔄 Compatibility
• 🤝 Issues & Contribution
• ⚖️ Licensing
• 🏁 Wrapping Up

📦 Installation

Using Node Package Manager (NPM) in a new terminal window run the following commands to install the required dependencies.

📋 Prerequisites

Angular Material

More information on theming Angular Material: https://material.angular.io/guide/theming

ng add @angular/material

📥 Install Scroll Top Component

ng add @proangular/ngx-scroll-top@latest

or

npm install @proangular/ngx-scroll-top --save

💻 Usage

Default (blue button with white icon)

<ngx-scroll-top></ngx-scroll-top>

Customization with optional inputs and icon

<ngx-scroll-top
  backgroundColor="#0D58C0"
  [bottomOffset]="footer.height"
  [displayAtYPosition]="1000"
  fontColor="#FFFAFA"
  fontSize="2rem"
  height="3rem"
  position="left"
  [zIndex]="1"
  width="3rem"
  >&#8686;</ngx-scroll-top
>

📚 Component API

| 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. |

🔄 Compatibility

| 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/[email protected] | | v13 | v1.x.x | ng add @proangular/[email protected] | | v12 | v1.x.x | ng add @proangular/[email protected] |

🤝 Issues & Contribution

Please submit all issues, and feature requests here: 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.

4. Allow CI actions to completely run and verify files.
5. Add/ping reviewers and await approval.

Thank you for any and all contributions!

⚖️ Licensing

This project is licensed under the MIT License. See the LICENSE file for the pertaining license text.

SPDX-License-Identifier: MIT

🏁 Wrapping Up

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.

| Type | Info | | :---------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- | | | [email protected] | | | https://github.com/sponsors/CodyTolene | | | https://www.buymeacoffee.com/codytolene | | | bc1qfx3lvspkj0q077u3gnrnxqkqwyvcku2nml86wmudy7yf2u8edmqq0a5vnt |

Fin. Happy programming friend!

Cody Tolene