@proangular/ngx-scroll-top NPM

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

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`