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

Author: bartholomej
Official Page: Go to website
Publish Date: January 21, 2020
License: MIT


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 install ngx-scrolltop --save
import { NgxScrollTopModule } from 'ngx-scrolltop';
  imports: [
  bootstrap: [AppComponent]
export class AppModule { }

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

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

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

// as a component
  mode="smart" // or 'classic'
  position="left" // or 'right'
  theme="pink" // 'black', 'white', 'gray', 'brown', 'deeporange', 'orange', 'yellow', 'green', 'blue', 'purple', 'deeppurple', 'pink', 'red'
// as a directive
<span ngxScrollTop [ngxScrollTopMode]="'smart'">
  ↑ Back To Top ↑

You Might Be Interested In:

Add Comment