Upon clicking a button (which is bottom of the page), I want to go to a certain element (in my case, #navbar) which is in the top of the current page, but I don't know how to do it. I've tried the following code with no avail.

<nav class=navbar navbar-light bg-faded id=navbar>

    <a class=navbar-brand href=#>

        {{appTitle}}

    </a>

    <!-- rest of the nav link -->

</nav>

<!-- rest of the page content -->



<!-- bottom of the page -->

<button class=btn btn-outline-secondary (click)=gotoTop()>Top</button>

In angular component:

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

 /* rest of the import statements  */

export class MyComponent {

   /* rest of the component code */

    gotoTop(){

       this.router.navigate([], { fragment: 'navbar' });

    }

}

I would really appreciate if someone helped me out with a solution and explained why my code hadn't worked.

Please note that element (navbar) is in other component.