https://github.com/ProAngular/ngx-scroll-top

Configurable, lightweight back to top button for Angular projects.
https://github.com/ProAngular/ngx-scroll-top

Last synced: 4 months ago
JSON representation

Configurable, lightweight back to top button for Angular projects.

Host: GitHub
URL: https://github.com/ProAngular/ngx-scroll-top
Owner: ProAngular
License: mit
Created: 2022-07-27T15:57:37.000Z (almost 3 years ago)
Default Branch: main
Last Pushed: 2022-08-03T07:02:18.000Z (almost 3 years ago)
Last Synced: 2025-02-04T20:12:41.290Z (4 months ago)
Language: TypeScript
Homepage:
Size: 6.38 MB
Stars: 1
Watchers: 0
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Awesome Lists containing this project

awesome-angular - ngx-scroll-top - Configurable, lightweight back to top button for Angular projects. (Table of contents / Third Party Components)
fucking-awesome-angular - ngx-scroll-top - Configurable, lightweight back to top button for Angular projects. (Table of contents / Third Party Components)
trackawesomelist - ngx-scroll-top (⭐2) - Configurable, lightweight back to top button for Angular projects. (Recently Updated / [Feb 10, 2025](/content/2025/02/10/README.md))

README

        


  

    

  

  


    

      Pro Angular

    : Scroll Top Button

  


[![npm](https://badgen.net/badge/icon/npm?icon=npm&label)](https://www.npmjs.com/@proangular/ngx-scroll-top)

[![GitHub](https://badgen.net/badge/icon/GitHub?icon=github&label)](https://github.com/ProAngular/ngx-scroll-top)

[![TypeScript](https://badgen.net/badge/icon/TypeScript?icon=typescript&label)](https://github.com/ProAngular/ngx-scroll-top/search?l=typescript)

[![npm Version](https://badge.fury.io/js/@proangular%2Fngx-scroll-top.svg)](https://www.npmjs.com/@proangular/ngx-scroll-top)

[![Node Version](https://badgen.net/npm/node/@proangular/ngx-scroll-top)](https://www.npmjs.com/@proangular/ngx-scroll-top)

[![Package Downloads](https://badgen.net/npm/dw/@proangular/ngx-scroll-top)](https://www.npmjs.com/@proangular/ngx-scroll-top)

[![Size](https://img.shields.io/bundlephobia/minzip/@proangular/ngx-scroll-top.svg)](https://bundlephobia.com/result?p=ProAngular/ngx-scroll-top)

[![Demo Status](https://badgen.net/badge/Demo/Online/green)](https://www.ProAngular.com/demos/ngx-scroll-top)

[![Website Status](https://img.shields.io/website?down_color=lightgrey&down_message=Offline&label=Website&up_color=green&up_message=Online&url=https%3A%2F%2Fwww.proangular.com)](https://www.proangular.com)

[![Gitter Chat](https://badges.gitter.im/ProAngular/lobby.svg)](https://gitter.im/ProAngular/community)

[![Discord Chat](https://img.shields.io/discord/1003103094588055552?label=Discord)](https://discord.com/channels/1003103094588055552)

[![Sponsors](https://img.shields.io/github/sponsors/proangular?label=Sponsors)](https://github.com/sponsors/ProAngular)

[![License](https://img.shields.io/npm/l/express.svg?maxAge=2592000)](/LICENSE)

[![GitHub Package Status](https://github.com/ProAngular/ngx-scroll-top/actions/workflows/on-merge-main-deploy-gpr.yml/badge.svg)](https://github.com/ProAngular/ngx-scroll-top/actions/workflows/on-merge-main-deploy-gpr.yml)

[![npmjs Package Status](https://github.com/ProAngular/ngx-scroll-top/actions/workflows/on-merge-main-deploy-npmjs.yml/badge.svg)](https://github.com/ProAngular/ngx-scroll-top/actions/workflows/on-merge-main-deploy-npmjs.yml)

## Table of Contents

- [Description](#description)

- [Demo](#demo)

- [Installation](#installation)

  - [Prerequisites](#prerequisites)

  - [Install Scroll Top Component](#install-scroll-top-component)

- [Usage](#usage)

- [Component API](#api)

- [Compatibility](#compatibility)

- [Issues & Contribution](#development)

- [Donations](#donations)

- [Licensing](#licensing)

- [Wrapping Up](#wrapping-up)

## Description 

Configurable, lightweight back to top button for Angular projects.

[ Index ]


## Demo 



  



Live demo here:

[https://www.ProAngular.com/demos/ngx-scroll-top](https://www.ProAngular.com/demos/ngx-scroll-top)

[ Index ]


## Installation 

Using Node Package Manager ([NPM][url-node-js]) in a new terminal window run the

following commands to install the required dependencies.

### Prerequisites 

**Angular Material**

More information on theming Angular Material:

https://material.angular.io/guide/theming

```bash

ng add @angular/material

```

### Install Scroll Top Component 

```bash

ng add @proangular/ngx-scroll-top@latest

```

or

```bash

npm install @proangular/ngx-scroll-top --save

```

[ Index ]


## Usage 

Default (blue button with white icon)

```html

```

Customization with optional inputs and icon

```html

⇮

```

[ Index ]


## Component API 

| 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. |

[ Index ]


## Compatibility 

| Angular version | @proangular/ngx-scroll-top | Status     |

| --------------- | -------------------------- | ---------- |

| v19             | v19.0.0                    | Compatible |

| v18             | ------                     | Untested   |

| v17             | ------                     | Untested   |

| v16             | ------                     | Untested   |

| v15             | ------                     | Untested   |

| v14             | v1.x.x                     | Compatible |

| v13             | v1.x.x                     | Compatible |

| v12             | v1.x.x                     | Compatible |

[ Index ]


## Issues & Contribution 

Please submit all issues, and feature requests here:

[https://github.com/ProAngular/ngx-scroll-top/issues](https://github.com/ProAngular/ngx-scroll-top/issues)

Contribution:

1. Clone the repo and create a new branch:

- `git clone https://github.com/ProAngular/ngx-scroll-top.git`

- `git checkout -b username/feature-or-bug-description`

2. Bump up the version of package in `package.json` and `package-lock.json`,

   commit all changes, push.

- `git add -A`

- `git commit -m "My commit message"`

- `git push origin username/feature-or-bug-description`

3. Submit code in published PR for review and approval. Add a good description

   and link any possible user stories or bugs.

- [Create a new pull request](https://github.com/ProAngular/ngx-scroll-top/compare).

4. Allow CI actions to completely run and verify files.

5. Add/ping reviewers and await approval.

Thank you for any and all contributions!

## Licensing 

This project is licensed under the **MIT** License. See the

[LICENSE](LICENSE.md) file for the pertaining license text.

`SPDX-License-Identifier: MIT`

[ Index ]


## Wrapping Up 

Thank you to the entire Angular team and community for such a great framework to

build upon. If you have any questions, please let me know by opening an issue

[here][url-new-issue].

| Type                                                                      | Info                                                           |

| :------------------------------------------------------------------------ | :------------------------------------------------------------- |

|                 | [email protected]                                       |

|            | https://github.com/sponsors/CodyTolene                         |

|      | https://www.buymeacoffee.com/codytolene                        |

|  | bc1qfx3lvspkj0q077u3gnrnxqkqwyvcku2nml86wmudy7yf2u8edmqq0a5vnt |

Fin. Happy programming friend!

Cody Tolene

[url-new-issue]: https://github.com/ProAngular/ngx-scroll-top/issues

[url-node-js]: https://nodejs.org/