D-Net

import {NavigationEnd, Router} from '@angular/router';

import {Injectable} from '@angular/core';

import {Subscription} from 'rxjs';

@Injectable({

  providedIn: 'root'

})

export class SmoothScroll {

  private interval;

  private readonly sub;

  private lastRoute;

  constructor(private router: Router) {

    if(typeof window !== "undefined") {

      this.sub = router.events.subscribe(event => {

        if (event instanceof NavigationEnd) {

          if (this.interval) {

            clearInterval(this.interval);

          }

          const fragment = router.parseUrl(router.url).fragment;

          if (this.lastRoute !== this.getUrl(event.url)) {

            window.scrollTo({top: 0});

          }

          if (fragment) {

            let i = 0;

            this.interval = setInterval(() => {

              i++;

              const element = document.getElementById(fragment);

              if (element) {

                if (this.interval) {

                  clearInterval(this.interval);

                }

                const yOffset = -100;

                let position = 0;

                let interval = setInterval(() => {

                  if (position !== element.getBoundingClientRect().top) {

                    position = element.getBoundingClientRect().top;

                  } else {

                    clearInterval(interval);

                    const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;

                    window.scrollTo({top: y, behavior: 'smooth'});

                  }

                }, 50);

              }

              if (i > 4 && this.interval) {

                clearInterval(this.interval);

              }

            }, 100);

          } else {

            window.scrollTo({top: 0, behavior: 'smooth'});

          }

          this.lastRoute = this.getUrl(event.url);

        }

      });

    }

  }

  private getUrl(url: string) {

    return url.split('?')[0].split('#')[0];

  }

  public clearSubscriptions() {

    if (this.sub && this.sub instanceof Subscription) {

      this.sub.unsubscribe();

    }

    if (this.interval) {

      clearInterval(this.interval);

    }

  }

}