Angular To Top Library

The Angular To Top library provides a customizable "Scroll to Top" button for your Angular applications. It offers a variety of options for configuring the button's appearance, behavior, and functionality.

Installation

To install the library, use the following command:

``bash
npm install sa-totop
`

Usage

$3

To use the sa-totop component in your Angular application, first import it and include it in your template:

`typescript
import { TotopComponent } from "sa-totop";
`

`html

`

$3

If you wish to use custom content for the button, set the customeBtn input to true and pass your custom content inside the sa-totop component:

`html

up

`

Inputs

| Input | Type | Default | Description |
| ------------------ | ---------------- | --------------- | -------------------------------------------------------------------------- |
| bottom | number | 20 | position of the button in pixels. |
| end | number | 20 | position of the button in pixels (inset-inline-end). |
| width | number | 40 | Size of the button in pixels. |
| color | string | '#0891b2' | Color of the button. |
| scrollBehavior | ScrollBehavior | 'smooth' | Type of scroll animation. Options: 'instant','smooth', 'auto'. |
| background | string | 'transparent' | Background color of the button. |
| duration | number | 0.3 | Speed of the animation in seconds. |
| visibilityHeight | number | 450 | Height in pixels before the button becomes visible. |
| visibilityHidden | boolean | true | If false, the button will hide when the scroll height reaches the value. |
| customeBtn | boolean | false | Allows the use of custom button content. |

Outputs

| Output | Description |
| ---------------- | --------------------------------------------------------------- |
| scrollComplete | Emits an event when the scroll to the top is complete. |
| toTopClicked | Emits an event when the button is clicked to scroll to the top. |

`html

``

License

MIT License