1.0.1 • Published 6 months ago
sa-totop v1.0.1
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-totopUsage
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