Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bartholomej/ngx-scrolltop
Lightweight, Material Design inspired "go to top button". No dependencies. Pure Angular!
https://github.com/bartholomej/ngx-scrolltop
angular angular13 angular14 angular15 angular16 angular17 angular18 angular2 go-to-top goodbye-ngcc gototop material material-design ng14 ngx sass scroll-to-top scroll-top scrolltop svg
Last synced: 1 day ago
JSON representation
Lightweight, Material Design inspired "go to top button". No dependencies. Pure Angular!
- Host: GitHub
- URL: https://github.com/bartholomej/ngx-scrolltop
- Owner: bartholomej
- License: mit
- Created: 2019-09-15T16:44:37.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-12-18T18:15:53.000Z (24 days ago)
- Last Synced: 2025-01-03T05:17:14.088Z (9 days ago)
- Topics: angular, angular13, angular14, angular15, angular16, angular17, angular18, angular2, go-to-top, goodbye-ngcc, gototop, material, material-design, ng14, ngx, sass, scroll-to-top, scroll-top, scrolltop, svg
- Language: TypeScript
- Homepage: http://bartholomej.github.io/ngx-scrolltop/
- Size: 5.42 MB
- Stars: 30
- Watchers: 3
- Forks: 4
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-angular - ngx-scrolltop - Lightweight, Material Design inspired **button for scroll-to-top** of the page. 🔼 **No dependencies. Pure Angular!** (Compatibility: Angular 9, Ivy, Universal, `ng add`). (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-scrolltop - Lightweight, Material Design inspired **button for scroll-to-top** of the page. 🔼 **No dependencies. Pure Angular!** (Compatibility: Angular 9, Ivy, Universal, `ng add`). (Table of contents / Third Party Components)
- awesome-angular - ngx-scrolltop - Lightweight, Material Design inspired **button for scroll-to-top** of the page. 🔼 **No dependencies. Pure Angular!** (Compatibility: Angular 9, Ivy, Universal, `ng add`). (Table of contents / Third Party Components)
README
Angular ScrollTop Button
[](https://badge.fury.io/js/ngx-scrolltop)
[](https://www.npmjs.com/ngx-scrolltop)
[](https://gitter.im/ngx-scrolltop/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[](https://github.com/auchenberg/volkswagen)
> Lightweight, **Material Design inspired button for scroll-to-top** of the page.
> No dependencies.
> **Pure Angular!**
> ✓ **Angular 18**, Angular Universal (**SSR**) a **Standalone Components** compatible
Just hit the button to smoothly scroll back to the top of the page. [Here's the demo.](http://bartholomej.github.io/ngx-scrolltop/)
- Lightweight _(~2 kB gzipped)_
- **Angular 18** compatible
- **Standalone Components** compatible
- Signals compatible
- No dependencies! _(only smooth scroll-behavior polyfill for iOS)_
- Material Design inspired
- `@angular/material` compatible ([example](#angular-material-example-directive))
- Component or directive way
- Smoothly animated
- a11y ready
- Highly customizable [options](#%EF%B8%8F-options)...
- [Angular 5+ compatible](#compatibility)
## 🎯 Demo (example)
Watch this [demo page](http://bartholomej.github.io/ngx-scrolltop/)
Or play with it live on [stackblitz.com/edit/ngx-scrolltop](https://stackblitz.com/edit/ngx-scrolltop?file=src/app/app.component.html)
## 📦 Install
> You're not using the latest version of Angular?
> [See our Angular compatibility instructions…](#compatibility)
Via **npm** or **yarn**
```bash
npm install ngx-scrolltop --save # for lastest Angular only! See our compatibility table
# yarn add ngx-scrolltop
```
### Compatibility
| Angular version | ngx-scrolltop | Install |
| --------------- | ------------- | ---------------------------------- |
| ng18 | v18.x.x | `npm install ngx-scrolltop@latest` |
| ng17 | v17.x.x | `npm install ngx-scrolltop@17` |
| ng16 | v6.x.x | `ng add ngx-scrolltop@6` |
| ng15 | v6.x.x | `ng add ngx-scrolltop@6` |
| ng14 | v4.x.x | `ng add ngx-scrolltop@4` |
| ng13 | v4.x.x | `ng add ngx-scrolltop@4` |
| ng12 | v4.x.x | `ng add ngx-scrolltop@4` |
| ng5 – ng11 | v2.x.x | `ng add ngx-scrolltop@2` |
## 🗜️ Setup and usage (`Standalone` or `Modules`)
> You have some options how to use this library.
> As a component or as a directive.
> You can also use it as a Standalone component (new angular way) or as a module (the original angular way).
### Standalone Component
In your root standalone component (e.g. `app.component.ts`) you need to add `NgxScrollTopComponent` into your `imports` array.
```diff
...
+ import { NgxScrollTopComponet } from 'ngx-scrolltop';
...
@Component({
selector: 'app',
standalone: true,
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
imports: [
+ NgxScrollTopComponent
],
})
export class AppComponent { }
```
And then in `app.component.html` you just need to add your new button. Usually at the end of your file.
```html
```
_See [options](#%EF%B8%8F-options) and [examples](#-examples) for more details..._
### Standalone Directive
In your root standalone component (e.g. `app.component.ts`) you need to add `NgxScrollTopDirective` into your `imports` array.
```diff
...
+ import { NgxScrollTopDirective } from 'ngx-scrolltop';
...
@Component({
selector: 'app',
standalone: true,
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
imports: [
+ NgxScrollTopDirective
],
})
export class AppComponent { }
```
And then in `app.component.html` you just need to create your new custom element... _(e.g. ``, ``, ``, ...)_
```html
↑ My Custom Element. ↑
```
**Important note**: _No style applied, everything is up to you. Of course I recommend `position: fixed`, ..._
_See more in [examples](#-examples)_
### Modules (the original Angular way)
> This is the original Angular way how to import libraries (via modules).
> You can use it as a component or as a directive as well.
In your root module (e.g. `app.module.ts`) you need to add `NgxScrollTopModule` into your `imports` array.
```diff
...
+ import { NgxScrollTopModule } from 'ngx-scrolltop';
...
@NgModule({
imports: [
...
+ NgxScrollTopModule
],
...
bootstrap: [AppComponent]
})
export class AppModule { }
```
_Next steps you can see above in [Standalone Component](#standalone-component) or [Standalone Directive](#standalone-directive)_ or in [examples](#-examples).
## ⚙️ Options
### Component
| Option | Type | Default | Description |
| ------------------- | ------------------------------------------------------------------------------ | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **mode** | `'smart'` \| `'classic'` | `'classic'` | **Smart** mode shows button only when you scroll more than two screens down and then you will try to go back to top. **Classic** mode shows button immediately when you scroll at least one screen down. |
| **backgroundColor** | string | #212121 | Background color (you can use all values for `backgroud-color` css property). _You can override `theme` color_ |
| **symbolColor** | string | #fafafa | Symbol color (you can use all values for `fill` svg property). _You can override `theme` color_ |
| **size** | number | 40 | Button size [in pixels]. _(Symbol will be resized automatically_) |
| ~~**symbol**~~ | ~~string~~ | | ~~You can use utf8 chars for customizing symbol. For example: `↑`~~ Removed in v2.0.0. Use _content projection_. See example [here](#symbol) |
| **position** | `'left'` \| `'right'` | `'right'` | Left or right, that is the question... |
| **theme** | [NgxScrollTopTheme](projects/ngx-scrolltop/src/lib/ngx-scrolltop.interface.ts) | `'gray'` | Choose from [official Material color themes](https://material.io/resources/color) |
#### Symbol
You can use _content projection_ for your own symbol.
```html
↑
```
Or you can even use your own components or fonts (e.g. fontAwesome)
```html
```
### Directive
| Option | Type | Default | Description |
| ---------------------- | ------------------------ | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **[ngxScrollTopMode]** | `'smart'` \| `'classic'` | `'classic'` | **Smart** mode shows button only when you scroll more than two screens down and then you will try to go back to top.**Classic** mode shows button immediately when you scroll at least one screen down. |
## 🎨 Examples
### Advanced example (component)
**app.component.html**
```html
↑
```
### Angular Material example (directive)
_[@angular/material](https://material.angular.io/components/button/overview) required_
**app.component.html**
```html
top
```
**app.component.scss**
```css
.my-custom-style {
position: fixed;
right: 20px;
bottom: 20px;
}
```
## 🔌 Dependencies
Pure Angular! _(with smooth scroll-behaviour polyfill for iOS)_
## 🙋 FAQ
### Old version of Angular
#### Error
If you are using older Angular (5 – 11) you will see this error on build or start:
> ERROR in node_modules/ngx-scrolltop/lib/ngx-scrolltop.core.service.d.ts:13:21 - error TS2694: Namespace '"/Users/user/projects/my-project/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
#### Solution
Easy! Use compatibility version of this library `npm install ngx-scrolltop@2 --save`
[See our Angular compatibility instructions…](#compatibility)
#### Error
If you are using Angular 14 with latest ngx-scrolltop library, you will see this error on build or start:
```bash
Error: node_modules/ngx-scrolltop/lib/ngx-scrolltop.component.d.ts:21:18 - error TS2707: Generic type 'ɵɵComponentDeclaration' requires between 7 and 8 type arguments.
21 static ɵcmp: i0.ɵɵComponentDeclaration;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error: node_modules/ngx-scrolltop/lib/ngx-scrolltop.directive.d.ts:17:18 - error TS2707: Generic type 'ɵɵDirectiveDeclaration' requires between 6 and 8 type arguments.
17 static ɵdir: i0.ɵɵDirectiveDeclaration;
```
#### Solution
Easy! Use compatibility version of this library `npm install ngx-scrolltop@4 --save`
[See our Angular compatibility instructions…](#compatibility)
## ⭐️ Show your support
Give a ⭐️ if this project helped you!
Or if you are brave enough consider [making a donation](https://github.com/sponsors/bartholomej) for some 🍺 or 🍵 ;)
## 📝 License
Copyright © 2023 [Lukas Bartak](http://bartweb.cz)
Proudly powered by nature 🗻, wind 💨, tea 🍵 and beer 🍺 ;)
All contents are licensed under the [MIT license].
[mit license]: LICENSE