Material Design Back To Top Button For Angular – ngx-scrolltop

Description:

ngx-scrolltop is an Angular component/directive to create a Material Design inspired back to top button that smoothly scrolls the page back to the top when clicked/tapped.

How to use it:

1. Install and import the ngx-scrolltop into your Angular module.

# Yarn
$ yarn add ngx-scrolltop

# NPM
$ npm install ngx-scrolltop --save

import { NgxScrollTopModule } from 'ngx-scrolltop';
@NgModule({
  imports: [
    ...
    NgxScrollTopModule
  ],
  ...
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Use the ngx-scrolltop as a component or a directive:

// as a component
<ngx-scrolltop></ngx-scrolltop>
// as a directive
<span ngxScrollTop>
  ↑ Back To Top ↑
</span>

3. Possible options to config the back to top button.

// as a component
<ngx-scrolltop
  [size]="40"
  backgroundColor="#33691e"
  symbolColor="#fff"
  symbol="↑"
  mode="smart" // or 'classic'
  position="left" // or 'right'
  theme="pink" // 'black', 'white', 'gray', 'brown', 'deeporange', 'orange', 'yellow', 'green', 'blue', 'purple', 'deeppurple', 'pink', 'red'
>
</ngx-scrolltop>
// as a directive
<span ngxScrollTop [ngxScrollTopMode]="'smart'">
  ↑ Back To Top ↑
</span>