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.

Material Design Angular ScrollTop Button

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

OptionTypeDefaultDescription
mode‘smart’ | ‘classic’‘classic’Smart mode shows button only when you scroll more than two screens down and then you will try to go back to top. Classic mode shows button immediately when you scroll at least one screen down.
backgroundColorstring#212121Background color (you can use all values for backgroud-color css property). You can override theme color
symbolColorstring#fafafaSymbol color (you can use all values for fill svg property). You can override theme color
sizenumber40Button size [in pixels]. (Symbol will be resized automatically)
symbolstringYou can use utf8 chars for customizing symbol. For example: 
position‘left’ | ‘right’‘right’Left or right, that is the question…
themeNgxScrollTopTheme‘gray’Material color themes

Directive

OptionTypeDefaultDescription
[ngxScrollTopMode]‘smart’ | ‘classic’‘classic’Smart mode shows button only when you scroll more than two screens down and then you will try to go back to top. Classic mode shows button immediately when you scroll at least one screen down.

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.

Leave a Reply