Angular4 - Scrolling to Anchor

Angular 9, scroll restoration/anchor scrolling does not work with async data loading

Try adding this function

scroll(id){
    const elmnt = document.getElementById(id);
    elmnt.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
}

and add the function to HTML

<domain-overview *ngFor="let domain of domains" (click)="scroll(id)" [id]="domain.id"></domain-overview>

How to smooth scroll to page anchor in angular 4 without plugins properly?

I was looking for a similar solution and tried to use the ngx-scroll-to package and found that its not working in latest version of angular (angular 6+) so decided to look into other option and found a solution which uses the browser's native scrollIntoView and this seems to be the best solution so far

HTML code :

<button (click)="scrollToElement(target)"></button>
<div #target>Your target</div>

Ts code :

scrollToElement($element): void {
    console.log($element);
    $element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
  }

Click child anchor scroll to parent html element single page in angular 8

Try like this:

Working Demo

home.component.html

<app-header (Navigate)="navigateTo($event)"></app-header>

home.component.ts

  @ViewChild("aboutus", { static: false }) aboutus;
  @ViewChild("contact", { static: false }) contact;

  navigateTo(element: string) {
    this[element].nativeElement.scrollIntoView({ behavior: "smooth" });
  }

header.component.ts

  @Output() Navigate = new EventEmitter();

  navigateTo(element: string) {
    this.Navigate.emit(element)
  }

header.component.html

<ul>
 <li class="nav-item">
    <a (click)="navigateTo('aboutus')" ><strong>ABOUT</strong></a>
</li>
<li class="nav-item">
    <a (click)="navigateTo('contact')" ><strong>Contact us</strong></a>
</li>
</ul>

---

Related Topics