@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) 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

[ 🔍 Index ]

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

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

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

Fin. Happy programming friend!

Cody Tolene