Angular ScrollTop Button

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

✓ Angular 17, Standalone components support and Angular Universal (SSR) compatible

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

• Lightweight (~2 kB gzipped)
• Standalone components support
• Angular 17 compatible
• 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 5+ compatible

🎯 Demo (example)

Watch this demo page

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

🛠️ Install

Via npm or yarn

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

# yarn add ngx-scrolltop

Compatibility

🗜️ Setup and usage (standalone)

Component way (standalone)

In app.component.ts you need to import NgxScrollTopComponent and add it to imports array.

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

@Component({
  selector: 'app',
  standalone: true,
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  imports: [
+   NgxScrollTopComponent
  ],
})
export class AppComponent { }

In app.component.html you just need to add your new button. Usually at the end of file.

<ngx-scrolltop></ngx-scrolltop>

Directive way (standalone)

In app.component.ts you need to import NgxScrollTopDirective and add it to imports array.

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

@Component({
  selector: 'app',
  standalone: true,
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  imports: [
+   NgxScrollTopDirective
  ],
})
export class AppComponent { }

And create your custom element somewhere in you application...

<span ngxScrollTop class="my-custom-element-with-my-style__no-lib-style-applied-here">
  ↑ My Custom Element. ↑
</span>

Important note: No style applied, everything is up to you. Of course I recommend position: fixed, ...

See more in examples

⚙️ Options

Component

Symbol

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…

⭐️ Show your support

Give a ⭐️ if this project helped you!

Or if you are brave enough 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.