Cómo llamar scrollIntoView en un elemento en angular 2+

Solución:

Primero agregue una variable de referencia de plantilla en el elemento (el #myElem):

<p #myElem>Scroll to here!</p>

Luego crea una propiedad en el componente con atributo ViewChild, y llama .nativeElement.scrollIntoView en eso:

export class MyComponent {
  @ViewChild("myElem") MyProp: ElementRef;

  ngOnInit() {
    this.MyProp.nativeElement.scrollIntoView({ behavior: "smooth", block: "start" });
  }
}

Podrías interceptar el evento NavigationEnd

    private scrollToSectionHook() {
    this.router.events.subscribe(event => {
        if (event instanceof NavigationEnd) {
            const tree = this.router.parseUrl(this.router.url);
            if (tree.fragment) {
                const element = document.querySelector('#' + tree.fragment);
                if (element) {
                    setTimeout(() => {
                        element.scrollIntoView({behavior: 'smooth', block: 'start', inline: 'nearest'});
                    }, 500 );
                }
            }
         }
    });
}

Puede lograr el mismo desplazamiento animado al elemento en Angular 2+, simplemente pase el elemento al hacer clic, así:

<button mat-fab (click)="scroll(target)">
    <i class="material-icons">
      arrow_drop_down
    </i>
 </button>
<div #target></div>

public scroll(element: any) {
    element.scrollIntoView({ behavior: 'smooth' });
  }

---

---

Utiliza Nuestro Buscador