`html

↑ My Custom Element. ↑

`

Important note: _No style applied, everything is up to you. Of course I recommend position: fixed, ..._

_See more in examples_

$3

> This is the original Angular way how to import libraries (via modules).
> You can use it as a component or as a directive as well.

In your root module (e.g. app.module.ts) you need to add NgxScrollTopModule into your imports array.

`diff
...
+ import { NgxScrollTopModule } from 'ngx-scrolltop';
...

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

_Next steps you can see above in Standalone Component or Standalone Directive_ or in examples.

⚙️ Options

$3

| 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: ↑~~ Removed in v2.0.0. Use _content projection_. See example here |
| position | 'left' \| 'right' | 'right' | Left or right, that is the question... |
| theme | NgxScrollTopTheme | 'gray' | Choose from official Material color themes |

#### Symbol

You can use _content projection_ for your own symbol.

`html
↑
`

Or you can even use your own components or fonts (e.g. fontAwesome)

`html



`

$3

| 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

$3

app.component.html

`html
[size]="50"
backgroundColor="#33691e"
symbolColor="#fff"
mode="smart"
position="left"
theme="pink"
>
↑

`

$3

_@angular/material required_

app.component.html

`html
ngxScrollTop
[ngxScrollTopMode]="'smart'"
class="my-custom-style"
color="primary"
mat-mini-fab
>
top