ng-animate-scroll [](https://www.npmjs.com/package/ng-animate-scroll)
October 27, 2018 ยท View on GitHub
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)
}
}