ngx-scrolltop v7.0.0

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

✓ Angular 10, Ivy and SSR compatible

Just hit the button to smoothly scroll back to the top of the page. Here's the demo.

• Lightweight (~2 kB gzipped)
• No dependencies!
• Material Design inspired
• @angular/material compatible (example)
• Angular 5+ compatible
• Component or directive way
• Smoothly animated
• a11y ready
• Highly customizable options...

Demo (example)

Watch this demo page

Or play with it live on stackblitz.com/edit/ngx-scrolltop

Install

Automatically (recommended) 🚀

ng add ngx-scrolltop

Everything's done! (module imported and all settings automatically set in your project.)

Now just see some options and examples.

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.

Donation

If this project have helped you save time please consider making a donation for some 🍺 or 🍵 ;)

License

Copyright © 2020 Lukas Bartak

Proudly powered by nature 🗻, wind 💨, tea 🍵 and beer 🍺 ;)

All contents are licensed under the MIT license.