O que eu quero alcançar é um clique para fazer uma rolagem suave até a área de divisão inferior / especificada, que eu defino com a hashtag, exatamente como eu acho que deveria ser assim.

Aqui está o exemplo ao vivo no exemplo w3school que é escrito para o JQuery:https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll

O que eu faço é espiar com esta resposta:Roteamento Angular2 com Hashtag para âncora de página

mas eu realmente não entendo a resposta, a resposta é assim:

esta parte é parte HTML:

<a [routerLink]="['somepath']" fragment="Test">Jump to 'Test' anchor </a>

e abaixo disso, o router.navigate é onde devo colocar o código? component.ts certo? mas como faço para acessar esta função? devo implementar (clique)?

this._router.navigate( ['/somepath', id ], {fragment: 'test'});

e abaixo disso, eu entendi, que deve escrever no meu component.ts:

** Add Below code to your component to scroll**

  import {ActivatedRoute} from '@angular/router'; // <-- do not forget to import

  private fragment: string;

  constructor(private route: ActivatedRoute { }

  ngOnInit() {
    this.route.fragment.subscribe(fragment => { this.fragment = fragment; });
  }

  ngAfterViewInit(): void {
    try {
      document.querySelector('#' + this.fragment).scrollIntoView();
    } catch (e) { }
  }

o que significa "somepath"? Eu devo adicionar uma rota em minhas rotas.ts, certo? Normalmente, adiciono um novo caminho aqui, por exemplo, assim:

export const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'product', redirectTo: '/product' },
  ...homeRoutes,
  ...productRoutes
];

alguém pode me fornecer um exemplo de código completo em HTML, rotas e componentes?