A simple customizable go-top button component for Angular projects.

This is the new version of the original ng2-go-top-button. This version was re-created according to the new Angular library format to support Angular v9 and higher. For previous Angular versions refer to the original version.

npm install ng-go-top-button --save

Import statement in the app module:

import {GoTopButtonModule} from 'ng-go-top-button';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

...

@NgModule({
    ...
    imports: [..., GoTopButtonModule, BrowserAnimationsModule],
    ...

In the target app component:

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  ...
  encapsulation: ViewEncapsulation.None // for animations and custom styling to work
})
export class AppComponent {
...
}

On your template paste the <ng-go-top-button></ng-go-top-button> html. This will add a simple button with default styles and without animated scroll. By default go-top-button will appear on the right side, 50% top and bottom and without any icons or text. You can then customize its styles and behaviour.

Example of customization:

<ng-go-top-button 
                 [animate]="true"
                 [speed]="50"
                 [acceleration]="2"
                 [scrollDistance]="300"
                 [classNames]="'custom-class'"
                 [styles]="{
                    'border-radius': '20px 20px 20px 20px',
                    'right': '5px',
                    'color': 'green',
                    'border': '5px solid',
                    'line-height': '20px'
                 }">
        <i class=\'fa fa-arrow-up\'></i>
  </ng-go-top-button>

Custom CSS class declaration (if needed):

.custom-class {
    position: fixed;
    background-color: pink;
    border-color: green;
    height: 30px;
    width: 30px;
}

IE does not support web animations. If you would like to enable them, install and import the corresponding polyfill to your polyfills.js file:

In your project's directory:

npm install --save web-animations-js

In polyfills.js:

import 'web-animations-js';

You can find example project that uses ng-go-top-button in projects/example-app/ directory of this repository. To run the example project execute the following commands from the root directory of the project:

ng build --project=example-app
cd projects/example-app
ng serve