Angular Material Design Scroll To Top Button

Lightweight, Material Design inspired button for scroll-to-top of the page. No dependencies. Pure Angular!

This is a Lightweight, Material Design inspired “go to top / scroll to top button” with no additional dependencies. Just hit the button to smoothly scroll back to the top of the page.

Features

• Lightweight (~10 kB)
• No dependencies
• Material Design inspired
• @angular/material compatible example
• Component or directive way
• Smoothly animated
• Highly customizable options…

Install

Automatically (recommended) ?

ng add ngx-scrolltop

Everything’s done!

Now just see some options.

(Module imported and all settings automatically set in your project.)

Manually (old-school) ?

Via yarn or npm

yarn add ngx-scrolltop # npm install ngx-scrolltop --save

Setup (manually)

...
+ import { NgxScrollTopModule } from 'ngx-scrolltop';
...

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

Usage

Component way (default)

In app.component.html you just need to add your new button. Usually at the end of file.

<ngx-scrolltop></ngx-scrolltop>

Directive way

Your custom element somewhere in you application…

Important: (no style applied, everything is up to you. Of course I recommend position: fixed, …)

<span
  ngxScrollTop
  class="my-custom-element-with-my-style__no-lib-style-applied-here"
>
  ↑ My Custom Element. ↑
</span>

Options

Component

Directive

Examples

Advanced example (component)

app.component.html

<ngx-scrolltop
  [size]="50"
  backgroundColor="#33691e"
  symbolColor="#fff"
  symbol="↑"
  mode="smart"
  position="left"
  theme="pink"
>
</ngx-scrolltop>

Angular Material example (directive)

@angular/material required

app.component.html

<button
  ngxScrollTop
  [ngxScrollTopMode]="'smart'"
  class="my-custom-style"
  color="primary"
  mat-mini-fab
>
  top
</button>

app.component.scss

.my-custom-style {
  position: fixed;
  right: 20px;
  bottom: 20px;
}

Dependencies

No dependencies! Pure Angular.

See live demo and download the source code.

This awesome script developed by bartholomej. Visit their official repository for more information and follow for future updates.