Angular ScrollTop Button
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 (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 ngx-scrolltop@2 --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 ngx-scrolltop@2
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 ngx-scrolltop@2 |
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) |
↑ |
|||
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
- Bump version
-beta.0
inpackage.json
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…
Donation
If this project have helped you save time please consider making a donation for some
License
Copyright © 2021 Lukas Bartak
Proudly powered by nature
All contents are licensed under the MIT license.