ngx-scroll-top 1.1.8
Install from the command line:
Learn more about npm packages
$ npm install @proangular/ngx-scroll-top@1.1.8
Install via package.json:
"@proangular/ngx-scroll-top": "1.1.8"
About this version
Pro Angular : Scroll Top Button
- Description
- Demo
- Installation
- Dependencies
- Usage
- Component API
- Compatibility
- Issues & Contribution
- Donations
- License
Configurable, lightweight back to top button for Angular projects.
Live demo here: https://www.ProAngular.com/demos/ngx-scroll-top
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 { }You should have an Angular Material theme set up prior to using this. It's also possible to use this without an angular theme and style it yourself entirely!
More information on theming Angular Material: https://material.angular.io/guide/theming
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.
