Angular ScrollTop Button

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

✓ Angular 17, Angular Universal (SSR) a Standalone Components 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! (only smooth scroll-behavior polyfill for iOS 14 and lower)
• Material Design inspired
• @angular/material compatible (example)
• Component or directive way
• Smoothly animated
• a11y ready
• Highly customizable options...
• Angular 17
• Angular 5+ compatible

Demo (example)

Watch this demo page

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

Install

Automatically (recommended) 🚀

You're not using the latest version of Angular? See our Angular compatibility instructions…

ng add ngx-scrolltop # for latest Angular only! See our compatibility table

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

npm install ngx-scrolltop --save # for lastest Angular only! See our compatibility table

Setup (manually)

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

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

Compatibility

Note: Since ngx-scrolltop v3, the library is compiled with IVY and fully supports Angular12+ (you can't use this with older Angular version anymore!)

If you still need to use it with an older version of Angular, then use version 2, which is still available: ng add ngx-scrolltop@2

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

Symbol

Since version v2.0.0 you can use content projection for your own symbol.

<ngx-scrolltop> ↑ </ngx-scrolltop>

Or you can even use your own components or fonts (e.g. fontAwesome)

<ngx-scrolltop>
  <i class="fa fa-arrow-up"></i>
</ngx-scrolltop>

Directive

Examples

Advanced example (component)

app.component.html

<ngx-scrolltop
  [size]="50"
  backgroundColor="#33691e"
  symbolColor="#fff"
  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

Pure Angular! (with smooth scroll-behaviour polyfill for iOS)

Development (notes for contributors)

Publish Stable

yarn release:patch
# yarn release:minor
# yarn release:major

Publish next channel

1. Bump version -beta.0 in package.json
2. yarn publish:next

FAQ

Old version of Angular

Error

If you are using older Angular (5 – 11) you will see this error on build or start:

ERROR in node_modules/ngx-scrolltop/lib/ngx-scrolltop.core.service.d.ts:13:21 - error TS2694: Namespace '"/Users/user/projects/my-project/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.

Solution

Easy! Use compatibility version of this library npm install ngx-scrolltop@2 --save

See our Angular compatibility instructions…

Error

If you are using Angular 14 with latest ngx-scrolltop library, you will see this error on build or start:

Error: node_modules/ngx-scrolltop/lib/ngx-scrolltop.component.d.ts:21:18 - error TS2707: Generic type 'ɵɵComponentDeclaration' requires between 7 and 8 type arguments.

21     static ɵcmp: i0.ɵɵComponentDeclaration<NgxScrollTopComponent, "ngx-scrolltop", never, { "backgroundColor": "backgroundColor"; "symbolColor": "symbolColor"; "size": "size"; "symbol": "symbol"; "position": "position"; "theme": "theme"; "mode": "mode"; }, {}, never, ["*"], false, never>;
                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/ngx-scrolltop/lib/ngx-scrolltop.directive.d.ts:17:18 - error TS2707: Generic type 'ɵɵDirectiveDeclaration' requires between 6 and 8 type arguments.

17     static ɵdir: i0.ɵɵDirectiveDeclaration<NgxScrollTopDirective, "[ngxScrollTop]", never, { "mode": "ngxScrollTopMode"; }, {}, never, never, false, never>;

Solution

Easy! Use compatibility version of this library npm install ngx-scrolltop@4 --save

See our Angular compatibility instructions…

Donation

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

License

Copyright © 2023 Lukas Bartak

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

All contents are licensed under the MIT license.