A lightweight Angular standalone component for smooth scroll-to-top functionality.
npm install sa-totopbash
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
``