annapogorelova / ng-go-top-button

A simple customizable go-top button component for Angular projects

ng-go-top-button

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

Versions

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.

Installation

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

Usage

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;
}

API

Property	Type	Description
scrollDistance	number	Number of pixels to be scrolled Y for button to be shown. Defaults to 200px. Must be greater than zero.
styles	object	User-defined styles config for the button.
classNames	string	Custom class names in the following format 'class1 class2 class3'. Note: this attribute completely overrides the default '.go-top-button' class attributes, so one should specify all style properties manually.
animate	boolean	If true, scrolling will be animated. False by default.
speed	number	Speed of animated scroll. Must be greater than 1. 80 by default.
acceleration	number	Number of pixels to speed up when scrolling is animated. 0 by default - this way page will be scrolled top with the constant speed.
tabIndex	number	Custom tabindex button attribute value, by default 0.

IE-specific issues:

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';

Example project

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