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

Question

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.

How about replacing the button with tag and putting an anchor? — Vega, Aug 17 '17 at 18:35
It won't serve my purpose. I want to use a click event. also want to do it by following strictly angular convention. — asmmahmud, Aug 17 '17 at 18:36
Since when Angular deprives you of the convention HTML ? That's a no sense, but respect your choice — Vega, Aug 17 '17 at 18:39
is it necessary for you to scroll to the element or would it be just fine to scroll to the very top of your website? — Dawid Zbiński, Aug 17 '17 at 18:45
In my case, it is important to scroll to a certain element. Besides that I want to use this in other scenarios. — asmmahmud, Aug 17 '17 at 18:47
https://stackoverflow.com/questions/51212900/scroll-to-specific-div-on-click-in-angular — O.Ndiaye, Dec 15 '20 at 11:52

Z. Bagley · Accepted Answer · 2017-08-17T19:53:13.053

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');
  el.scrollIntoView();
}

Working plunker.

it doesn't seem to work. Please note that element is in other component. — asmmahmud, Aug 17 '17 at 18:42
I got it working after using this: `this.myElement.nativeElement.ownerDocument.getElementById('navbar').scrollIntoView({behavior: 'smooth'});` — asmmahmud, Aug 17 '17 at 22:03

score 2 · Answer 2 · edited Aug 18 '17 at 18:17

2

I know, you want to scroll to a specific element in the page. But, if the element is in the top of the page, then you can use the following:

window.scrollTo(0, 0);

edited Aug 18 '17 at 18:17

asmmahmud

4,844
2
40
47

answered Aug 18 '17 at 18:05

score 1 · Answer 3 · answered Apr 01 '21 at 11:14

1

document.getElementById("YOUR_DIV_ID").scrollIntoView({ behavior: 'smooth' });

answered Apr 01 '21 at 11:14

Usman Saleh

699
5
8

Vega · Answer 4 · 2017-08-17T20:40:40.443

0

I think your way didn't work because of the empty router.

this.router.navigate(['/home'], { fragment: 'top' });

would work if 'home' is declared as a route and you have the id="top" element on it.

I know you would like it to be "pure Angular way", but this should work (at least):

gotoTop(){
  location.hash = "#navbar";
}

edited Aug 17 '17 at 20:40

answered Aug 17 '17 at 20:32

Vega

27,856
27
95
103

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

4 Answers4

Linked