Haz scroll en Angular
Publicado el 17.12.2022 a las 10: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);
element.scrollIntoView({ behavior: 'smooth' });
}
Hasta luego 🖖
¿Te gusta mi contenido? Apóyame
Puede que te interesen los siguientes artículos 👇
