D-Net

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

import { ActivatedRoute } from '@angular/router';

import { Subscription } from 'rxjs';

export class MethodologyPageComponent implements OnInit, OnDestroy {

  private subscriptions: any[] = [];

  constructor(private route: ActivatedRoute) {

  }

  ngOnInit(): void {

    this.subscriptions.push(this.route.fragment.subscribe(fragment => {

      setTimeout(() => {

        this.goTo(fragment);

      }, 100);

    }));

  }

  goTo(id: string) {

    const yOffset = -100;

    const element = document.getElementById(id);

    if (element) {

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

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

    }

  }

  ngOnDestroy(): void {

    this.subscriptions.forEach(subscription => {

      if (subscription instanceof Subscription) {

        subscription.unsubscribe();

      }

    });

  }