Angular ScrollTop Button is a lightweight Material Design-inspired scroll-up button. Compatible with Angular 13, Ivy, and Angular Universal (SSR).
angular scroll to top stackblitz, angular scroll to top not working, floating back to top button html, back to top button javascript smooth scrolling examples, back to top button design
Just tap the button to scroll smoothly to the top of the page.
- Lightweight (~2KB compressed)
- No dependencies!
- Multidimensional inspired design
- @angular/material compatible (example)
- component or directive method
- smoothly animated
- a11y ready
- Highly customizable options…
- Angle 13: ivy pure support
- Compatible with Angular 5+
Horizontal Smooth Scrolling Parallax Slider in Vanilla JavaScript
How to make use of it:
1. Install and import ngx-scrolltop to your Angular module.
# Yarn $ yarn add ngx-scrolltop # NPM $ npm install ngx-scrolltop --save
import { NgxScrollTopModule } from 'ngx-scrolltop'; @NgModule({ imports: [ ... NgxScrollTopModule ], ... bootstrap: [AppComponent] }) export class AppModule { }
2. Use ngx-scrolltop as a component or directive:
// as a component <ngx-scrolltop></ngx-scrolltop> // as a directive <span ngxScrollTop> ↑ Back To Top ↑ </span>
3. Possible options to configure the back to top button.
// as a component <ngx-scrolltop [size]="40" backgroundColor="#33691e" symbolColor="#fff" symbol="↑" mode="smart" // or 'classic' position="left" // or 'right' theme="pink" // 'black', 'white', 'gray', 'brown', 'deeporange', 'orange', 'yellow', 'green', 'blue', 'purple', 'deeppurple', 'pink', 'red' > </ngx-scrolltop> // as a directive <span ngxScrollTop [ngxScrollTopMode]="'smart'"> ↑ Back To Top ↑ </span>
Options
Component
Option | Type | Default | Description |
---|---|---|---|
mode | ‘smart’ | ‘classic’ | ‘classic’ | The smart mode shows a button only when you scroll more than two screens down and then you will try to go back to the top. The classic mode shows a 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 |
Material Design Back To Top Button, Angular ScrollTop Button Plugin/Github
See Demo And Download
Official Website(bartholomej): Click Here
This superior jQuery/javascript plugin is developed by bartholomej. For extra Advanced Usages, please go to the official website.
Be First to Comment