bartholomej / ngx-scrolltop

Lightweight, Material Design inspired "go to top button". No dependencies. Pure Angular!
http://bartholomej.github.io/ngx-scrolltop/
MIT License
30 stars 3 forks source link
angular angular13 angular14 angular15 angular16 angular17 angular18 angular2 go-to-top goodbye-ngcc gototop material material-design ng14 ngx sass scroll-to-top scroll-top scrolltop svg

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 18, 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.

Demo animation

🎯 Demo (example)

Watch this demo page

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

📦 Install

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

Via npm or yarn

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

# yarn add ngx-scrolltop

Compatibility

Angular version ngx-scrolltop Install
ng18 v18.x.x npm install ngx-scrolltop@latest
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.

...
+ 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.

<ngx-scrolltop></ngx-scrolltop>

See options and 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.

...
+ 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. <span>, <div>, <button>, ...)

<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

Modules (the original Angular way)

This is the original Angular way how to import libraries (via modules). You can use it as a component or as a directive as well.

In your root module (e.g. app.module.ts) you need to add NgxScrollTopModule into your imports array.

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

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

Next steps you can see above in Standalone Component or Standalone Directive or in examples.

⚙️ 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' Choose from official Material color themes

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

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)

🙋 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.