[Fixed] Scroll to a certain element of the current page in Angular 4


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="#">
    <!-- rest of the nav link -->
<!-- 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 */
       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.


You can do this with javascript:

gotoTop() {
  let el = document.getElementById('navbar');
  el.scrollTop = el.scrollHeight;

This will bring the DOM element with id="navbar" into view when the method is called. There’s also the option of using Element.scrollIntoView. This can provide a smooth animation and looks nice, but isn’t supported on older browsers.

If the element is in a different component you can reference it several different ways as seen in this question.

The easiest method for your case would likely be:

import { ElementRef } from '@angular/core'; // at the top of component.ts

constructor(myElement: ElementRef) { ... } // in your export class MyComponent block

and finally

gotoTop() {
  let el = this.myElement.nativeElement.querySelector('nav');

Working plunker.

Leave a Reply

(*) Required, Your email will not be published