@proangular/ngx-scroll-top

ProAngular
  |  

GitHub Repo
  |  

NPM Package
  |  

Demo Page

A simple, configurable, lightweight back to top button for your Angular projects.

ng add @proangular/ngx-scroll-top

Click here to preview it live!

📇 Index

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

📦 Installation

Using Node Package Manager ([NPM][url-node-js]) in a new terminal window run the
following commands to install the required dependencies.

$3

Angular Material

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

``bash
ng add @angular/material
`

$3

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

or

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

[ 🔍 Index ]

💻 Usage

Default (blue button with white icon)

`html

`

Customization with optional inputs and icon

`html
backgroundColor="#0D58C0"
[bottomOffset]="footer.height"
[displayAtYPosition]="1000"
fontColor="#FFFAFA"
fontSize="2rem"
height="3rem"
position="left"
[zIndex]="1"
width="3rem"
>⇮>
`

[ 🔍 Index ]

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

[ 🔍 Index ]

🔄 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/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 |

[ 🔍 Index ]

🤝 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!

[ 🔍 Index ]

⚖️ Licensing

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

SPDX-License-Identifier: MIT`

[ 🔍 Index ]

🏁 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][url-new-issue].

| Type | Info |
| :---------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- |
| | webmaster@codytolene.com |
| | https://github.com/sponsors/CodyTolene |
| | https://www.buymeacoffee.com/codytolene |
| | bc1qfx3lvspkj0q077u3gnrnxqkqwyvcku2nml86wmudy7yf2u8edmqq0a5vnt |

Fin. Happy programming friend!

Cody Tolene

[url-new-issue]: https://github.com/ProAngular/ngx-scroll-top/issues
[url-node-js]: https://nodejs.org/