Pure Angular Material Design Back To Top Button | ngx-scrolltop

ngx-scrolltop-button

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+

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

OptionTypeDefaultDescription
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.
backgroundColorstring#212121Background color (you can use all values for backgroud-color CSS property). You can override theme color
symbolColorstring#fafafaSymbol color (you can use all values for fill SVG property). You can override theme color
sizenumber40Button size [in pixels]. (Symbol will be resized automatically)
symbolstring You can use utf8 chars for customizing symbols. For example:  Removed in v2.0.0. Use content projection.
position‘left’ | ‘right’‘right’Left or right, that is the question…
themeNgxScrollTopTheme‘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.