Haz scroll en Angular

Publicado el 17.12.2022 a las 09:37

Haz scroll en Angular

⚫ Demostración

⚫ Vamos al código

🟣 HTML

🟣 TypeScript

Haz scroll en Angular

Demostración

A continuación un ejemplo de lo que te enseñaré a hacer, haz clic en cualquiera de los botones y verás como nos desplazamos a esa parte del artículo de forma suave (smooth)


Sección 1


Sección 2

Vamos al código

HTML

  <div class="section" id="section1">
    <h3>Sección 1</h3>        
    <button class="btnPrimary" type="button" (click)="goToSection('section2')">Ir a la sección 2</button>
  </div>
  <br>
  <div class="section" id="section2">
    <h3>Sección 2</h3>
    <button class="btnPrimary" type="button" (click)="goToSection('section1')">Ir a la sección 1</button>
  </div>  
  

TypeScript

En el fichero ts 👇

    public goToSection(section: string): void {
    const element = document.getElementById(section);
    if(element) element.scrollIntoView({ behavior: 'smooth' });
  }
  

Hasta luego 🖖

fjmduran.com v 17.0.1