Package Exports

ngx-scrolltop

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngx-scrolltop) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Angular ScrollTop Button

Lightweight, Material Design inspired button for scroll-to-top of the page. No dependencies. Pure Angular!

Support for Angular 8 an Ivy!

Just hit the button to smoothly scroll back to the top of the page. Here's the demo.

Lightweight
Material Design inspired
Smoothly animated
Highly customizable
With some useful options...

Demo animation

Demo (example)

Watch this: http://bartholomej.github.io/ngx-scrolltop/

Install

Automatically (recommended) 🚀

ng add ngx-scrolltop

Module imported and all settings automatically set in your project.

Now just see some options

Manually (alternatively) 🛠

Via yarn or npm

yarn add ngx-scrolltop # npm install ngx-scrolltop --save

Setup

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

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

Usage

In app.component.html you just need to add your new button. Usually at the end of file.

<ngx-scrolltop></ngx-scrolltop>

Options

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)
symbolColor	string	#fafafa	Symbol color (you can use all values for `fill` svg property)
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

Options: Example

app.component.html

<ngx-scrolltop
  [size]="50"
  backgroundColor="#33691e"
  symbolColor="#fff"
  symbol="↑"
  mode="smart"
  position="left"
  theme="pink"
>
</ngx-scrolltop>

Dependencies

No dependencies! Pure Angular.

License

Proudly powered by nature 🗻, wind 💨, tea 🍵 and beer 🍺 ;)

All contents are licensed under the MIT license.