ngx-scroll-top 1.1.6
Install from the command line:
Learn more about npm packages
$ npm install @proangular/ngx-scroll-top@1.1.6
Install via package.json:
"@proangular/ngx-scroll-top": "1.1.6"
About this version
Pro Angular : Scroll Top Button
Configurable, lightweight back to top button for Angular projects.
ng add @proangular/ngx-scroll-top@latestor
npm install @proangular/ngx-scroll-top --saveImport NgxScrollTopModule where needed
...
+ import { NgxScrollTopModule } from '@proangular/ngx-scroll-top';
...
@NgModule({
imports: [
...
+ NgxScrollTopModule
],
...
})
export class AppModule { }Default (blue button with white icon)
<ngx-scroll-top></ngx-scroll-top>Customization with optional inputs and icon
<ngx-scroll-top
backgroundColor="#0D58C0"
[bottomOffset]="footer.height"
[displayAtYPosition]="1000"
fontColor="#FFFAFA"
fontSize="2rem"
height="3rem"
position="left"
[zIndex]="1"
width="3rem"
>⇮</ngx-scroll-top>| Input | Value Typing | Default Value | Description |
|---|---|---|---|
| backgroundColor | string |
'#0D58C0' (dark-blue) |
Background color of the back to top button. Define any 'x' css property available for 'background-color: x'. |
| 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. |
| fontColor | string |
'#FFFFFF' (white) |
The font color for the nested content within the back to top button. Define any 'x' css property available for 'color: x'. |
| fontSize | string | '16px' |
The font size for the nested content within the back to top button. Define any 'x' css property available for 'font-size: x'. |
| height | string | '40px' |
Height of back to top button in string px format. |
| position |
'left' | 'right'
|
'right' |
Position on-screen where the back to top button is displayed. |
| width | string | '40px' |
Width of back to top button in string px format. |
| zIndex | 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. |
| 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 |
Please submit all issues, and feature requests here: https://github.com/ProAngular/ngx-scroll-top/issues
Contribution:
- Clone the repo and create a new branch:
git clone https://github.com/ProAngular/ngx-scroll-top.gitgit checkout -b username/feature-or-bug-description
- Bump up the version of package in
package.jsonandpackage-lock.json, commit all changes, push.
git add -Agit commit -m "My commit message"git push origin username/feature-or-bug-description
- Submit code in published PR for review and approval. Add a good description and link any possible user stories or bugs.
- Allow CI actions to completely run and verify files.
- Add/ping reviewers and await approval.
Thank you for any and all 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!
Copyright © 2022 Cody Tolene
All content is licensed under the MIT license.
