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





> Lightweight, Material Design inspired button for scroll-to-top of the page.
> No dependencies.
> Pure Angular!
> ✓ Angular 21, Signals, Standalone Components and Angular Universal (SSR) compatible
Just hit the button to smoothly scroll back to the top of the page. Here's the demo.
- No dependencies! _(only smooth scroll-behavior polyfill for old iOS versions)_
- Lightweight _(~2 kB gzipped)_
- Angular 21 compatible
- Standalone Components compatible
- Signals compatible
- Material Design inspired
- @angular/material compatible (example)
- Component or directive way
- Smoothly animated
- a11y ready
- Highly customizable options...
Watch this demo page
Or play with it live on stackblitz.com/edit/ngx-scrolltop
> You're not using the latest version of Angular?
> See our Angular compatibility instructions…
Via npm or yarn
``bash
npm install ngx-scrolltop --save # for lastest Angular only! See our compatibility table
$3
| Angular version | ngx-scrolltop | Install |
| --------------- | ------------- | ---------------------------------- |
| ng21 | v21.x.x |
npm install ngx-scrolltop@latest |
| ng20 | v20.x.x | npm install ngx-scrolltop@20 |
| ng19 | v19.x.x | npm install ngx-scrolltop@19 |
| ng18 | v18.x.x | npm install ngx-scrolltop@18 |
| ng17 | v17.x.x | npm install ngx-scrolltop@17 |
| ng16 | v6.x.x | ng add ngx-scrolltop@6 |
| ng15 | v6.x.x | ng add ngx-scrolltop@6 |
| ng14 | v4.x.x | ng add ngx-scrolltop@4 |
| ng13 | v4.x.x | ng add ngx-scrolltop@4 |
| ng12 | v4.x.x | ng add ngx-scrolltop@4 |
| ng5 – ng11 | v2.x.x | ng add ngx-scrolltop@2 |🗜️ Setup and usage (
Standalone or Modules)> You have some options how to use this library.
> As a component or as a directive.
> You can also use it as a Standalone component (new angular way) or as a module (the original angular way).
$3
In your root standalone component (e.g.
app.component.ts) you need to add NgxScrollTopComponent into your imports array.`diff
...
+ import { NgxScrollTopComponet } from 'ngx-scrolltop';
...@Component({
selector: 'app',
standalone: true,
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
imports: [
+ NgxScrollTopComponent
],
})
export class AppComponent { }
`And then in
app.component.html you just need to add your new button. Usually at the end of your file.`html
`_See options and examples for more details..._
$3
In your root standalone component (e.g.
app.component.ts) you need to add NgxScrollTopDirective into your imports array.`diff
...
+ import { NgxScrollTopDirective } from 'ngx-scrolltop';
...@Component({
selector: 'app',
standalone: true,
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
imports: [
+ NgxScrollTopDirective
],
})
export class AppComponent { }
`And then in
app.component.html you just need to create your new custom element... _(e.g. , , app.component.scss
`css
.my-custom-style {
position: fixed;
right: 20px;
bottom: 20px;
}
`🔌 Dependencies
Pure Angular! _(with smooth scroll-behaviour polyfill for iOS)_
🙋 FAQ
$3
#### 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 --saveSee 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:
`bash
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;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
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;
`#### Solution
Easy! Use compatibility version of this library
npm install ngx-scrolltop@4 --save`See our Angular compatibility instructions…
Give a ⭐️ if this project helped you!
Or if you are brave enough consider making a donation for some 🍺 or 🍵 ;)
Copyright © 2025 Lukas Bartak
Proudly powered by nature 🗻, wind 💨, tea 🍵 and beer 🍺 ;)
All contents are licensed under the [MIT license].
[mit license]: LICENSE