Angular Material Design goto Top Button Component

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

Angular Material Design goto Top Button Component

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

Option Type Default Description
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.
backgroundColor string #212121 Background color (you can use all values for backgroud-color css property). You can override theme color
symbolColor string #fafafa Symbol color (you can use all values for fill svg property). You can override theme color
size number 40 Button size [in pixels]. (Symbol will be resized automatically)
symbol string You can use utf8 chars for customizing symbol. For example:
position ‘left’ | ‘right’ ‘right’ Left or right, that is the question…
theme NgxScrollTopTheme ‘gray’ Material color themes

Directive

Option Type Default Description
[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 source code.

DEMO | DOWNLOAD

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


Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.