space-a
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