Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

ng-animate-scroll

7.1.0 • Public • Published

ng-animate-scroll npm version

Customisable angular module to animate scroll event to an element. Compatible with Angular 2.x onwards

Installation

First you need to install the npm module:

npm i ng-animate-scroll --save

Usage

1. Methods:

AnimateScrollService

  • scrollToElement(elementID: string, duration: number = 750): Find an element using its ID and scrolls to it smoothly. Duration of the animation is optional and has default of 750 ms.

2. Example

import { Component } from '@angular/core';
import { NgAnimateScrollService } from 'ng-animate-scroll';
 
@Component({
    selector: 'app',
    template: `
        <header id="header"></header>
        <button (click)="navigateToHeader()">scroll to header</div>
        <button (click)="navigateToHeader(2000)">scroll to header slowly</div>
    `
})
export class AppComponent {
 
    constructor(private animateScrollService: NgAnimateScrollService) {
    }
 
    navigateToHeader(duration?:number) {
        this.animateScrollService.scrollToElement('header', duration)
    }
}

Install

npm i ng-animate-scroll

DownloadsWeekly Downloads

3,836

Version

7.1.0

License

MIT

Unpacked Size

77 kB

Total Files

21

Last publish

Collaborators

  • avatar