Lightweight, Material Design inspired button for scroll-to-top of the page. No dependencies. Pure Angular!
This is a Lightweight, Material Design inspired “go to top / scroll to top button” with no additional dependencies. Just hit the button to smoothly scroll back to the top of the page.
Features
- Lightweight (~10 kB)
- No dependencies
- Material Design inspired
@angular/materialcompatible example- Component or directive way
- Smoothly animated
- Highly customizable options…
Install
Automatically (recommended) 🚀
ng add ngx-scrolltop
Everything’s done!
Now just see some options.
(Module imported and all settings automatically set in your project.)
Manually (old-school) 🛠
Via yarn or npm
yarn add ngx-scrolltop # npm install ngx-scrolltop --save
Setup (manually)
...
+ import { NgxScrollTopModule } from 'ngx-scrolltop';
...
@NgModule({
imports: [
...
+ NgxScrollTopModule
],
...
bootstrap: [AppComponent]
})
export class AppModule { }
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: ↑ | |
| position | ‘left’ | ‘right’ | ‘right’ | Left or right, that is the question… |
| theme | NgxScrollTopTheme | ‘gray’ | Material color themes |
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"
symbol="↑"
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
No dependencies! Pure Angular.
See live demo and download the source code.
This awesome script developed by bartholomej. Visit their official repository for more information and follow for future updates.