Awesome Open Source
Awesome Open Source

Angular ScrollTop Button

npm version NPM Downloads Join the chat at https://gitter.im/ngx-scrolltop/Lobby volkswagen status

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

✓ Angular 13, Ivy 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)
  • No dependencies! (only smooth scroll-behavior polyfill for iOS)
  • Material Design inspired
  • @angular/material compatible (example)
  • Component or directive way
  • Smoothly animated
  • a11y ready
  • Highly customizable options...
  • Angular 13: Pure IVY support
  • Angular 5+ compatible

Demo animation

Demo (example)

Watch this demo page

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

Install

Automatically (recommended) 🚀

Not using latest version of Angular? See our Angular compatibility instructions…

ng add ngx-scrolltop # for Angular 12+ 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 Angular 12+ only! See our compatibility table

# npm install [email protected] --save # for Angular 5 – 11

Setup (manually)

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

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

Compatibility

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 [email protected]

Angular version ngx-scrolltop Install
ng13 v4.x.x ng add ngx-scrolltop
ng12 v4.x.x ng add ngx-scrolltop
ng5 – ng11 v2.x.x ng add [email protected]

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

Option Type Default Description
mode 'smart' | 'classic' 'classic' Smart mode shows button only when you scroll more than two screens down and then you will try to go back to top. Classic mode shows button immediately when you scroll at least one screen down.
backgroundColor string #212121 Background color (you can use all values for backgroud-color css property). You can override theme color
symbolColor string #fafafa Symbol color (you can use all values for fill svg property). You can override theme color
size number 40 Button size [in pixels]. (Symbol will be resized automatically)
symbol string You can use utf8 chars for customizing symbol. For example: Removed in v2.0.0. Use content projection. See example here
position 'left' | 'right' 'right' Left or right, that is the question...
theme NgxScrollTopTheme 'gray' Material color themes

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

Option Type Default Description
[ngxScrollTopMode] 'smart' | 'classic' 'classic' Smart mode shows button only when you scroll more than two screens down and then you will try to go back to top. Classic mode shows button immediately when you scroll at least one screen down.

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 [email protected] --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 © 2021 Lukas Bartak

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

All contents are licensed under the MIT license.


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (265,345
Angular (12,870
Sass (6,252
Material Design (3,509
Svg (3,250
Angular2 (2,025
Material (1,579
Angular7 (679
Angular8 (563
Ngx (290
Angular9 (274
Angular10 (142
Angular11 (112
Angular12 (103
Scroll To Top (20
Scrolltop (11
Ng9 (4
Related Projects