Table of Contents

• Description
• Demo
• Installation
• Dependencies
• Usage
• Component API
• Compatibility
• Issues & Contribution
• Donations
• License

Description

Configurable, lightweight back to top button for Angular projects.

Demo

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

Installation

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

or

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

Import NgxScrollTopModule where needed

...
+ import { NgxScrollTopModule } from '@proangular/ngx-scroll-top';
...

@NgModule({
  imports: [
    ...
+   NgxScrollTopModule
  ],
  ...
})
export class AppModule { }

Dependencies

Styling UX - Angular Material

You should have an Angular Material theme set up prior to using this. It's also possible to use this without an angular theme and style it yourself entirely!

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

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

Compatibility

| Angular version | @proangular/ngx-scroll-top | Install | | --------------- | -------------------------- | ------------------------------------------ | | v14 | v1.x.x | ng add @proangular/ngx-scroll-top@latest | | v13 | v1.x.x | ng add @proangular/ngx-scroll-top@latest | | v12 | v1.x.x | ng add @proangular/ngx-scroll-top@latest |

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!

Donation

As a husband and father of four children, your donations mean the world to me! Any donations are greatly appreciated and keep me going!

• https://www.paypal.me/CodyTolene
• https://github.com/sponsors/ProAngular

License

Copyright © 2022 Cody Tolene

All content is licensed under the MIT license.