Angular 5 anchor did not scroll

Question

What I am trying to do is to create an anchor link. This link will navigate to a specific scroll point in my page. I have Angular version 5.

Html:

<mat-list>
     <mat-list-item><a [routerLink]="['/']"> Intro </a></mat-list-item>
     <mat-list-item><a [routerLink]="['/']" fragment="mobile"> Mobile </a></mat-list-item>     
     ...
</mat-list>

In home.componets.ts:

export class HomeGrComponent implements OnInit {
    private fragment: string;

constructor(private route: ActivatedRoute) { }

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

ngAfterViewInit(): void {
    try {
        setTimeout(()=> {
            document.querySelector('#' + this.fragment).scrollIntoView();
        }, 1000);

    } catch (e) { }
  }    
}

I took this code from this question but it doesn't work. Url is changed to

http://localhost:4200/#mobile

but it didn't scroll to my point. Also in console there is an error:

Cannot read property 'scrollIntoView' of null

What can be possible goes wrong? If you need some additional information please ask me to reply. Also it could be great the scroll navigates smoothly (optional).

You can remove the ngAfterViewInit and use `this.route.fragment.filter(f => !!f).subscribe(f => document.querySelector('#' + f).scrollIntoView())` — Markai, Feb 22 '18 at 09:54
no it didn't work it shows me - this.route.fragment.filter is not a function — Vasilis Greece, Feb 22 '18 at 10:00
Then you Need to add the Import `import { filter } from 'rxjs/operators';` and better use `[...].fragment.pipe(filter(f => !!f))[...]` (https://www.learnrxjs.io/operators/filtering/filter.html) — Markai, Feb 22 '18 at 10:04
Do you even have an element with id 'mobile' in your template? — Markai, Feb 22 '18 at 10:12
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/165633/discussion-between-vasilis-greece-and-markai). — Vasilis Greece, Feb 22 '18 at 10:14

score 2 · Accepted Answer · answered Feb 22 '18 at 10:27

2

You can use the following Code:

import { Component, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { filter } from 'rxjs/operators';
import { Subscription } from 'rxjs';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnDestroy {
  private sub: Subscription;

  constructor(activeRoute: ActivatedRoute) {
    this.sub = activeRoute.fragment.pipe(filter(f => !!f)).subscribe(f => document.getElementById(f).scrollIntoView());
  }

  public ngOnDestroy(): void {
    if(this.sub) this.sub.unsubscribe();
  }
}

Working example and Code behind

answered Feb 22 '18 at 10:27

Markai

2,098
1
10
15

That is working. Do you have an idea where to put a code for a smooth scroll? – Vasilis Greece Feb 22 '18 at 10:41
1) in ngOnDestroy when I put a console.log message, it never appears I don't know how it works, 2) the first problem is when the page is refreshing with /#mobile it says Cannot read property 'scrollIntoView' of null and on page shows nothing, 3) the second problem after the click, if I want to scroll somewhere else and then if I click again the same button, it didn't navigates me to the point, 4) scrollIntoView function it didn't recognize smooth command. Can I do in other way somehow - a smooth scrolling navigation? – Vasilis Greece Feb 23 '18 at 18:41

Nikola Gavric · Answer 2 · 2018-02-22T10:14:42.617

1

The reason why it's not working is that ngAfterViewInit is being called before the Observable is resolved, and therefore this.fragment is null, so no element is found

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

ngAfterViewInit(): void {
    let interval = setInterval(()=> {
        let elem = document.getElementById(this.fragment);
        if(elem) {
            elem.scrollIntoView();
            clearInterval(interval);
        }
    }, 1000);  
}

edited Feb 22 '18 at 10:14

answered Feb 22 '18 at 09:54

Nikola Gavric

3,507
1
8
16

There is a problem. Can you be more specific? – Vasilis Greece Feb 22 '18 at 10:00
Just add another check for `elem` inside of that `if` – Nikola Gavric Feb 22 '18 at 10:09
I did if(elem && elem.length>0) - but it still did not recognized the length – Vasilis Greece Feb 22 '18 at 10:13
If it still fails on `length` then just remove that and test for existence of `elem`, i've updated the answer – Nikola Gavric Feb 22 '18 at 10:14
What does that mean? – Nikola Gavric Feb 22 '18 at 10:25
first when I press an other navigation button it didn't work for the other button plus (second) when I scroll to page after click when I press it again didn't goes to this point again – Vasilis Greece Feb 22 '18 at 10:29
1

The scroll will execute only once, thats why we used `interval`, if you need to listen for `url` changes constantly then you can take a look at @Markai answer – Nikola Gavric Feb 22 '18 at 10:34

score 0 · Answer 3 · answered Oct 16 '20 at 10:31

Another option is to use setTimout(). So you don't need clearInterval(). You can also access the fragment with the help of the ActivatedRoute

constructor(private route: ActivatedRoute) {}

ngAfterViewInit(): void {
           setTimeout(() => document.querySelector(this.route.snapshot.fragment).scrollIntoView(), 1000);
}

Angular 5 anchor did not scroll

3 Answers3