Desplácese al elemento al hacer clic en Angular 4

Quiero poder desplazarme a un objetivo cuando se presiona un botón. Estaba pensando en algo como esto.

<button (click)="scroll(#target)">Button</button>

Y en mi component.tsmétodo como.

scroll(element) {
    window.scrollTo(element.yPosition)
}

Sé que el código anterior no es válido, solo para mostrar lo que estaba pensando. Acabo de comenzar a aprender Angular 4 sin experiencia previa en Angular. He estado buscando algo como esto, pero todos los ejemplos están en AngularJs, que difiere mucho de Angular 4

Podrías hacerlo así:

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

y luego en su componente:

scroll(el: HTMLElement) {
    el.scrollIntoView();
}

Editar: Veo comentarios que indican que esto ya no funciona debido a que el elemento no está definido. Creé un ejemplo de StackBlitz en Angular 7 y todavía funciona. ¿Alguien puede dar un ejemplo donde no funciona?

En realidad, existe una forma pura de JavaScript de lograr esto sin usar setTimeoutorequestAnimationFrame o jQuery.

En resumen, busque el elemento en scrollView al que desea desplazarse y utilícelo scrollIntoView.

el.scrollIntoView({behavior:"smooth"});

Aquí hay un plunkr .

Así es como lo hice usando Angular 4.

Modelo

<div class="col-xs-12 col-md-3">
  <h2>Categories</h2>
  <div class="cat-list-body">
    <div class="cat-item" *ngFor="let cat of web.menu | async">
      <label (click)="scroll('cat-'+cat.category_id)">{{cat.category_name}}</label>
    </div>
  </div>
</div>

agregue esta función al Componente.

scroll(id) {
  console.log(`scrolling to ${id}`);
  let el = document.getElementById(id);
  el.scrollIntoView();
}

En Angular 7 funciona perfecto

HTML

<button (click)="scroll(target)">Click to scroll</button>
<div #target>Your target</div>

En componente

  scroll(el: HTMLElement) {
    el.scrollIntoView({behavior: 'smooth'});
  }

Jon tiene la respuesta correcta y esto funciona en mis proyectos angulares 5 y 6.

Si quisiera hacer clic para desplazarse suavemente de la barra de navegación al pie de página:

<button (click)="scrollTo('.footer')">ScrolltoFooter</button>
<footer class="footer">some code</footer>

scrollTo(className: string):void {
   const elementList = document.querySelectorAll('.' + className);
   const element = elementList[0] as HTMLElement;
   element.scrollIntoView({ behavior: 'smooth' });
}

Como quería volver al encabezado desde el pie de página, creé un servicio en el que se encuentra esta función y lo inyecté en los componentes de la barra de navegación y el pie de página y pasé el 'encabezado' o el 'pie de página' cuando fuera necesario. solo recuerde dar a las declaraciones de componentes los nombres de clase utilizados:

<app-footer class="footer"></app-footer>

Otra forma de hacerlo en Angular:

Margen:

<textarea #inputMessage></textarea>

Agregar ViewChild()propiedad:

@ViewChild('inputMessage')
inputMessageRef: ElementRef;

Desplácese a cualquier lugar que desee dentro del componente usando la scrollIntoView()función:

this.inputMessageRef.nativeElement.scrollIntoView();

Puede desplazarse a cualquier referencia de elemento en su vista utilizando el bloque de código a continuación. Tenga en cuenta que el objetivo (elementref id ) podría estar en cualquier etiqueta html válida.

En la vista (archivo html)

<div id="target"> </div>
<button (click)="scroll()">Button</button>
 

  

en el .tsarchivo,

scroll() {
   document.querySelector('#target').scrollIntoView({ behavior: 'smooth', block: 'center' });
}

Puede lograrlo utilizando la referencia a un elemento DOM angular de la siguiente manera:

Aquí está el ejemplo en stackblitz

la plantilla de componente:

<div class="other-content">
      Other content
      <button (click)="element.scrollIntoView({ behavior: 'smooth', block: 'center' })">
        Click to scroll
      </button>
    </div>
    <div id="content" #element>
      Some text to scroll
</div>

En Angular puede usar ViewChildy ElementRef: darle a su elemento HTML una referencia

<div #myDiv > 

y dentro de su componente:

import { ViewChild, ElementRef } from '@angular/core';
@ViewChild('myDiv') myDivRef: ElementRef;

que puedes usar this.myDivRef.nativeElementpara llegar a tu elemento

He hecho algo como lo que estás preguntando simplemente usando jQuery para encontrar el elemento (como document.getElementById(...)) y usando la .focus()llamada.

Puedes hacer esto usando jquery:

código ts:

    scrollTOElement = (element, offsetParam?, speedParam?) => {
    const toElement = $(element);
    const focusElement = $(element);
    const offset = offsetParam * 1 || 200;
    const speed = speedParam * 1 || 500;
    $('html, body').animate({
      scrollTop: toElement.offset().top + offset
    }, speed);
    if (focusElement) {
      $(focusElement).focus();
    }
  }

código HTML :

<button (click)="scrollTOElement('#elementTo',500,3000)">Scroll</button>

Aplique esto en los elementos que desea desplazar:

<div id="elementTo">some content</div>

Aquí hay una muestra de stackblitz.