sa-totop/README.md

A lightweight Angular standalone component for smooth scroll-to-top functionality.

# 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

### 1. Import the directive

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
<sa-totop></sa-totop>
```

### Custom Button Content

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
<sa-totop [width]="40" [customeBtn]="true">
  <span>up</span>
</sa-totop>
```

## 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
<sa-totop [width]="40" [bottom]="50" [end]="30" [color]="'#0891b2'" [scrollBehavior]="'smooth'" [background]="'transparent'" [duration]="0.3" [visibilityHeight]="450" [visibilityHidden]="true" [customeBtn]="false" (scrollComplete)="onScrollComplete()" (toTopClicked)="onToTopClicked()"> </sa-totop>
```

## License

MIT License