ngx-scroll-top 1.1.3
Install from the command line:
Learn more about npm packages
$ npm install @proangular/ngx-scroll-top@1.1.3
Install via package.json:
"@proangular/ngx-scroll-top": "1.1.3"
About this version
Pro Angular : Scroll Top Button
Configurable, lightweight back to top button for Angular projects.
| Angular version | @proangular/ngx-scroll-top | Install |
|---|---|---|
| v14 | v1.x.x | ng add @proangular/ngx-scroll-top@latest |
| v13 | v1.x.x | ng add @proangular/ngx-scroll-top@latest |
| v12 | v1.x.x | ng add @proangular/ngx-scroll-top@latest |
Install package
npm install @proangular/ngx-scroll-top --saveImport package
...
+ import { NgxScrollTopModule } from '@proangular/ngx-scroll-top';
...
@NgModule({
imports: [
...
+ NgxScrollTopModule
],
...
})
export class AppModule { }Use package
<ngx-scroll-top></ngx-scroll-top>| Input | Value Typing | Default Value | Description |
|---|---|---|---|
| backgroundColor | string |
'#1775d1' (blue) |
Background color of the back to top button (hex string). |
| bottomOffset | string | number | '0px' |
Offset px from bottom of page when scrolled to bottom. For example this can be used to make sure the back to top button never overlaps a footer. |
| displayAtYPosition | string | number | '420px' |
The back to top button will not be displayed until the user scrolls to the provided Y (vertical px) coordinate on the page. |
| position |
'left' | 'right'
|
'right' |
Position on-screen where the back to top button is displayed. |
| styleHeight | string | '25px' |
Height of back to top button in string px format. |
| styleWidth | string | '25px' |
Width of back to top button in string px format. |
| styleZIndex | number | 999 |
Style the z-index for the back to top button as needed for correct layer height adjustment. This can be useful when working with sticky headers. |
<ngx-scroll-top
backgroundColor="black"
[bottomOffset]="footerHeightPx || 200"
displayAtYPosition="250px"
position="left"
styleHeight="30px"
styleWidth="30px"
[styleZIndex]="500"
>
↑
</ngx-scroll-top>- Pull, create new branch, add changes.
- Bump version of package in
package.jsonandpackage-lock.json, commit all changes, push. - Submit code in published PR for review and approval.
- Allow CI actions to completely run and verify files.
Thank you for your contributions!
As a husband and father of four children, your donations mean the world to me! Any donations are greatly appreciated and keep me going!
https://www.paypal.me/CodyTolene https://github.com/sponsors/ProAngular
Copyright © 2022 Cody Tolene
All contents are licensed under the MIT license.
