Pro Angular : Scroll Top Button

Table of Contents

• Description
• Demo
• Installation
  • Prerequisites
  • Install Scroll Top Component
• Usage
• Component API
• Compatibility
• Issues & Contribution
• Donations
• Licensing
• Wrapping Up

Description

Configurable, lightweight back to top button for Angular projects.

[ Index ]

Demo

Live demo here: https://www.ProAngular.com/demos/ngx-scroll-top

[ Index ]

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' (dark-blue)	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' (white)	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	'40px'	Height of back to top button in string px format.
position	'left' | 'right'	'right'	Position on-screen where the back to top button is displayed.
width	string	'40px'	Width of back to top button in string px 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.0.0	ng add @proangular/ngx-scroll-top@^20.0.0
v19	v19.0.0	ng add @proangular/ngx-scroll-top@^19.0.0
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!

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