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:

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:

import { TotopComponent } from "sa-totop";

<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:

<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. |

<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