[](https://badge.fury.io/js/ngx-scrolltop)
[](https://www.npmjs.com/ngx-scrolltop)
[](https://gitter.im/ngx-scrolltop/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[](https://github.com/auchenberg/volkswagen)
> Lightweight, **Material Design inspired button for scroll-to-top** of the page.
> No dependencies.
> **Pure Angular!**
> ✓ **Angular 20**, **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.](http://bartholomej.github.io/ngx-scrolltop/)
- No dependencies! _(only smooth scroll-behavior polyfill for old iOS versions)_
- Lightweight _(~2 kB gzipped)_
- **Angular 20** compatible
- **Standalone Components** compatible
- **Signals** compatible
- Material Design inspired
- `@angular/material` compatible ([example](#angular-material-example-directive))
- Component or directive way
- Smoothly animated
- a11y ready
- Highly customizable [options](#%EF%B8%8F-options)...
## 🎯 Demo (example)
Watch this [demo page](http://bartholomej.github.io/ngx-scrolltop/)
Or play with it live on [stackblitz.com/edit/ngx-scrolltop](https://stackblitz.com/edit/ngx-scrolltop?file=src/app/app.component.html)
## 📦 Install
> You're not using the latest version of Angular?
> [See our Angular compatibility instructions…](#compatibility)
Via **npm** or **yarn**
```bash
npm install ngx-scrolltop --save # for lastest Angular only! See our compatibility table
# yarn add ngx-scrolltop
```
### Compatibility
| Angular version | ngx-scrolltop | Install |
| --------------- | ------------- | ---------------------------------- |
| ng20 | v20.x.x | `npm install ngx-scrolltop@latest` |
| 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).
### Standalone Component
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](#%EF%B8%8F-options) and [examples](#-examples) for more details..._
### Standalone Directive
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. ``, `
